HTML5 Web存储（整理） 2017.3.17

【本地存储方式：】

有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。

1.cookie（缓存）（常用）
cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE大约只能存储2K.
2.Flash ShareObject
这种方式能解决上面提到的cookie存储的两个弊端，而且能够跨越浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个flash，当浏览器没有安装flash空间==控件时就不能用了，所幸的是，没有安装flash的用户极少。
3.Google Gear
Google开发的一种本地存储技术，但需要安装Gear组件
4.userData
IE浏览器可以使用userData来存储，容量可以达到640k，这种方案是很可靠的，不需要安装额外的插件，但是它仅在IE下有效。
5.sessionStorage（常用）
使用Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口页面刷新或跳转，都能获取到本地存储的数据，当新开窗口或者页面的时候，原来的数据就失效了，并且IE不支持，不能实现数据的持久保存。
6.globalStorage
使用Firefox2+的火狐浏览器，类似于uaerData
7.localStorage（常用）
localStorage是WebStorage互联网存储规范中的一部分，现在在Firefox3.5、safari 4和IE8中得到支持。（低版本浏览器不支持）；

注：可在菜鸟教程看详细实例   http://www.runoob.com/html/html5-webstorage.html


结论：
Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

补充：由于项目需要，简单模拟了HTML5 localStorage中的几个方法，支持firefox2+，IE5+，chrome3+，其他不详。

js代码：

 

 
//写入
localStorage.setItem('name', 'shuiniuer');
//读取
localStorage.getItem('name');
//删除
localStorage.removeItem('name');