突袭HTML5之Javascript API扩展3—本地存储全新体验

发布时间：2020-11-24 00:54:55 所属栏目：MySql教程来源：互联网

导读：存储数据在客户端可以解决很多的问题和减少不必要的传输数据: 能保存程序的状态/ 能缓存数据/能保存用户的喜好等等以前的做法是很繁笨的，接下来将详细介绍感兴

为什么要存数据到客户端？
存储数据在客户端可以解决很多的问题和减少不必要的传输数据：
1. 能保存程序的状态：用户关闭浏览器再打开后能知道他工作到哪了。
2. 能缓存数据：很多不会变化的数据根本没必要每次都从服务端获取。
3. 能保存用户的喜好：这种数据通常不需要存在服务端。
以前的做法
在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：
1. HTTP cookie。HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据，允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE，否则它基本没什么用处。
3. Flash cookie。Flash cookie实际上和HTTP cookie并不是一回事，或许它的名字应该叫做"Flash本地存储”，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的 ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是 Flash。
4. Google Gears。Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是 Google自己都已经不用它了。
眼花缭乱的各种技术导致的就是浏览器的兼容性问题。这里大家用的最多的可能就是cookie了。
HTML5中的全新体验
针对以上的问题，HTML5中给出了更加理想的解决方案：假如你需要存储的只是简单的用key/value对即可解决的数据，则可以使用Web Storage。
与Cookie相比，Web Storage存在不少的优势，概括为以下几点：
1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。
2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
Web Storage分类
Web Storage实际上由两部分组成：sessionStorage与localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
检查是否支持Web Storage
Web Storage在各大主流浏览器中都支持了，但是为了兼容老的浏览器，还是要检查一下是否可以使用这项技术。
第一种方式：通过检查Storage对象是否存在来检查浏览器是否支持Web Storage：

复制代码

代码如下:

if(typeof(Storage)!=="undefined"){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
// Sorry! No web storage support..
}

第二种方式就是分别检查各自的对象，例如检查localStorage是否支持：

复制代码

代码如下:

if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
// Yes! localStorage and sessionStorage support!
// Some code.....
}
或者：
if('localStorage' in window && window['localStorage'] !== null){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
或者
if (!!localStorage) {
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}

很显然第一个方式最直接，也最简单。
Web Storage的使用
Web Storage中存储的是键值对，而且浏览器会以字符串方式存储。记住在必要的时候将他们转为其他格式。
sessionStorage与localStorage除了用途不同外，成员列表是一样的：

复制代码

代码如下:

key = value: 存贮键值对
setItem(key, value): 存贮键值对
getItem(key): 取键值对
removeItem(key)：移除所有键值对
clear()：清空所有键值对
length：键值对的数目

这里还是要强调一下：setItem(key,value)方法中的value类型，理论上可以是任意类型，不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地，因此如果是自定义的类型则需要自己定义有意义的toString方法。例如下面的例子结合JSON.stringify使用：

复制代码

代码如下:

此外，添加键值对的时候，如果添加的数量比较多，比较保险的做法是去检查是否有超出限额的异常：

复制代码

代码如下:

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/2

尾页