Web Storage 概述

指可以在客户端本地保存数据的Web Storage功能,其实就是提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取

我们知道,html4中是使用cookies在客户端保存用户名等简单的用户信息,但是我们发现用cookies存储永久数据有如下问题:

• 大小 : 被限制在4KB
• 带宽 : 请求新页面时,cookie也会被一起发送,因此会浪费一部分发送cookies使用的带宽

针对这些问题,在HTML5中,提供了一种在客户端保存数据的功能,它就是Web Storage,把数据保存在你的计算机中,可以通过javascript来获取这些数据

Web Storage的好处

• 本地存储和cookie一样提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在
• 大！虽然不同浏览器的标准可能不一样，主流的一般都在5~10M，比cookie的4k强多了
• 本地存储的数据不会被发到服务器，与cookie相比，节省带宽，加快响应速度

所以，如果需要保存一些数据到用户的浏览器，而这些数据又不需要每个请求都提交给服务器，不妨考虑使用本地存储。

如何使用

检查浏览器是否支持

建议使用如下这种

window.localStorage && window.localStorage.getItem

Web Storage的接口

确定支持localStorage后就可以在控制台打印以下localStorage,就能列出它的全部方法

localStorage
    length:0
    __proto__:Storage
     clear:
     constructor
     getItem
     setItem
     key
     removeItem
     setItem
     __proto__
    //length：本地存储数据的个数
    //setItem(key,value)：向key字段写入value数据
    //getItem(key)：去key字段的数据
    //removeItem(key)：移除key字段
    //clear()：清空该域下的所有数据
    //key(i)：获取第i个数据的key

web Storage是指在web上存储数据的功能,这里的存储是针对客户端而言,具体来说,Web Storage又分为两种:localStorage和sessionStroage

localStorage是保存在客户端本地中,即使浏览器关闭了,该数据仍然存在,下次打开浏览器访问网站时,仍然可以继续使用

sessionStroage 是指用户浏览某个网页时,从进入网站到浏览器关闭所经过的这段时间,当浏览器关闭时数据也将都丢失

我们还可以像操作一个Object一样操作Web Stroage

- sessionStorage 
(1)保存数据
sessionStorage.setItem('key','value');
sessionStorage.key = value;
(2)读取数据
sessionStorage.getItem('key');
sessionStorage.key
(3)移除数据
sessionStorage.removeItem('key')

- localStorage 
(1)保存数据
localStorage.setItem('key','value');
localStorage.key = value;
(2)读取数据
localStorage.getItem('key');
localStorage.key
(3)移除数据
localStorage.removeItem('key')

唯一不同的是，对于一个不存在的字段notExist，localStorage.getItem(‘notExist’)会返回null，而localStorage[‘notExist’]则返回undefined。

一些细节

本地存储只能存字符串数据，所有数据在写入的时候会被隐式调用toString方法转为字符串，即

var ls=localStorage;
var data={
  user:"lily",
  sex:"female"
};
ls.setItem('data',data);
ls.setItem('date2',JSON.stringify(data));
console.info(ls.data); //[object Object]
console.info(ls.date2);

因此，需要存储json之类的数据时，需要自己做转换。

不同浏览器，分配给本地存储的空间是不一样的，譬如chrome是5M。 一个unicode字符占2个字节（英文和中文一样），所以5M可以存储1024*1024/2=524288个字符，包括key和value。

也就是说，localStorage.setItem(‘user’,’John’)向本地存储写进了8个字符（16Byte）。这个网站有一份各种浏览器分配给localStorage存储空间大小的表，你也可以在上面测试当前使用的浏览器支持多大的存储空间，不过它的数据有个问题，它没有考虑到一个unicode字符占2字节，因此它的数据应该全部乘2。

当本地存储满了，再往里面写数据，将会触发error（这点和cookie的表现不一样），因此一个严谨的脚本应该捕捉写localStorage的错误

var FIVE_MB=Array(5*1024*512).join('囧');
try{
  localStorage.setItem('x',FIVE_MB);
}catch(e){
  console.info('Oops');
}

当调用localStorage.clear()时，整个域的数据会被清空，包括和当前页面共享一个存储空间的其他页面。

浏览器不支持本地存储怎么办?

对于IE6和IE7，有userData，可以提供最多1024kb的空间，虽然userData可以设置有效期，但是仍然存在写满报错的问题，并且userData创建的存储文件不能被枚举，因此需要人为地维护。

另外还可以使用内嵌flash控件，使用flash的本地存储空间，flash默认提供100kb，使用更多需要用户授权。
这两种方法的使用成本较高，本文就不再展开讨论了。