HTML5本地存储之Web Storage

简介： Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，WebStorage官方建议为每个网站5MB。 Web Storage又分为两种：        sessionStorage        localStorage   从字面意思就可以很清楚的看出来，ses

Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，WebStorage官方建议为每个网站5MB。

Web Storage又分为两种：

       sessionStorage

       localStorage

 

从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；

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

·        保存数据：localStorage.setItem(key,value);

·        读取数据：localStorage.getItem(key);

·        删除单个数据：localStorage.removeItem(key);

·        删除所有数据：localStorage.clear();

·        得到某个索引的key：localStorage.key(index);

如上，key和value都必须为字符串，换言之，web Storage的API只能操作字符串,对于JS中常用的数组或对象却不能直接存储。

 

但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了。请看下面的代码。

var obj = { name:'Jim' };

var str =JSON.stringify(obj);

//存入

localStorage.obj = str;

//读取

str = localStorage.obj;

//重新转换为对象

obj = JSON.parse(str);

 

localStorage语法很简单，而且我们不需要考虑具体的实现机制：

 

  1 window.localStorage.getItem( key );

  2 window.localStorage.setItem( key, value );

  3 window.localStorage.removeItem( key );

  4 window.localStorage.clear();

  5 window.localStorage.length;

  6 window.localStorage.key( i );

 

上述五个方法和一个属性是最常用、也够用的localStorage的接口，也是所有实现得最为统一的接口。更多其他使用方法，请自行百度查找，这里不一一列举。

 

Web Storage这个东西真正好：量大、永久存储、不用使用任何插件，不随http发送 … 用来保存一些用户非敏感的状态和信息是再合适不过的了。其浏览器兼容性如下：

可以看到，由于除IE外的其他浏览器很早的版本都支持了，关键是我们可以不用考虑这些浏览器的更低版本，所以基本上可以认为都已经支持了localStorage，而IE是个特例，虽然IE8就开始支持localStorage应该夸奖，但是其更低版本IE却都不支持，令人气馁的是，这些低版本浏览器在中国的占有率挺高…

 

这是一个微信案例。

https://mp.weixin.qq.com/s/0P6L80wvLBX-g9Onu2pxXA

 

将JS 存入了localStorage。