HTML5网页存储Web Storage

1 什么是Web Storage

Web Storage是一种将少量数据存储在客户端(Client)磁盘的技术。只要支持WebStorage API规格的浏览器，网页设计者都可以使用JavaScript来操作它，在网页没有Web Storage之前，其实已有在客户端存储少量数据的功能，称为Cookie，两者有一些不同和相同之处。

1. 存储大小不同：Cookie只允许每个网站在客户端存储4KB的数据，而在HTML5中，Web Storage的容量由浏览器绝对，一般为1MB~5MB。
2. 安全性不同：Web Storage运行于客户端，不会出现Cookie值给服务器端使得安全性降低。
3. 都以一组key-value对应保存数据：Cookies是以一组key-value对应的组合保存数据，Web Storage也是同样方式。

2 存储方式

Web Storage提供两种方式将数据保存在客户端：一种是localStorage，另一种是sessionStorage，两者主要差异在于生命周期以及有效范围，参考如下表格。

Web Storage类型	生命周期	有效范围
localStorage	执行删除命令才会消失	同一网站的网页可以跨窗口和分页
sessionStorage	浏览器窗口或分页(tab)关闭就会消失	仅对当前浏览器窗口或分页有效

3 检测浏览器是否支持Web Storage

if(typeof(Storage)=="undefined") {
    alert("您的浏览器不支持Web Storage")
} else {
    //localStorage和sessionStorage程序代码
}

目前Internet Explorer 8+、Firefox、Opera、Chrome和Safari都支持Web Storage。需要注意的是，IE和FireFox测试时需要把文件上传到服务器或localhost才能运行。建议测试时使用Google Chrome浏览器。

4 存储和读取

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

1. 保存数据：localStorage.setItem(key,value);
2. 读取数据：localStorage.getItem(key);
3. 删除单个数据：localStorage.removeItem(key);
4. 删除所有数据：localStorage.clear();
5. 得到某个索引的key：localStorage.key(index);

web storage本质上是以一组key-value对应的组合保存数据，因此其存储和读取也可以使用“[]”或者“.”操作符进行操作。
例如：

//存储
window.localStorage["myStr"]="Hello World";
//读取
window.localStorage["myStr"]；  // 输出"Hello World"

//存储
window.localStorage.myStr="Hello World";
//读取
window.localStorage.myStr；  // 输出"Hello World"

5 应用

localStorage最典型的应用应该算是登录记住密码的功能实现了，通常用户在登录一个网站时，浏览器都会提示“是否记住密码？”，如果选择记住密码，下次再从同一个浏览器登录该网站时，便不再需要用户再次输入用户名和密码，而是这些信息已经显示在了输入框内，用户只需要点击“登录”按钮即可；甚至当用户进入网站时，直接让用户处于已登录的状态。这样便省去了用户登录网站时所花费的时间。html5之前这种功能可以用cookie做到，但是cookie的写法冗杂，又有缺陷。如今用html5的WebStorage中的localStorage就可以轻松做到。