我们知道，存储信息主要是在服务端或客户端。服务端可通过各种服务器语言，把数据存储在数据库里，这也是网站存储用户信息的主要途径。而在客户端呢？html5之前，web浏览器都是通过cookie来存储的，不过cookie存在以下缺点：

  1. cookie需要通过javascript 频繁的设置和读取；
  2. 数量和体积是有限的，数量不超过50个，大小不超过4KB。
  3. cookie以一个文件的形式存在客户端的机器上，用户可更改，安全性较低。

在html5中新增了web Storage存储功能。

无论用户是离线还是在线状态，用户操作web storage都可以将信息存储在本地，因此web storage又被称作为“本地存储”。

web storage存储的数据只能只能在同一机器，同一浏览器读取。

另外，它存储数据的格式与cookie类似，也是以键值对的格式进行存储。

web storage分类

storage主要分为两类：localStorage（本地存储） 和sessionStorage（会话存储）；

localStorage

localStorage对象可以永久存储，当然我们也可以手动的删除数据，存储量有5M的限制。

该对象可以在不同页面间共享数据存储，比如我们在一个选项页打开了一个网页，设置了一些东西，再在另外一个选项页打开此页面时，会看到我们的设置。

sessionStorage

sessionStorage对象则是临时对话存储，也就是说当我们关闭窗口后，数据存储就失效，sessionStorage与localStorage有相同的方法。只不过两者存储数据的时间不同。

web storage数据的操作

设置

设置存储数据主要有三种方式：

localStorage[key] = value;
localStorage.key = value;
localStorage.setItem("key", value);

读取

读取数据的方式主要是通过它的键值，也有三种方式：

localStorage[key];
localStorage.key;
localStorage.getItem("myKey");

我们可以看到，web storage对象与普通对象属性和方法的设置、读取是类似的，第三种方法则更偏向于cookie的写法。它们返回的值都是字符串。

若要读取所有的存储数据，我们可以通过遍历：

if (localStorage) {
　for (var i=0,len=localStorage.length; i<len; i++) {
　　var iKey = localStorage.key(i);
　　var iItem = localStorage[iKey];
　　alert(iKey+";"+iItem);
　}
}

删除

删除单条数据，只需要对它进行removeItem函数操作：

localStorage.removeItem("key");

而清空所有本地保存的数据。我们可以使用clear()：

localStorage.clear();

我们可以通过在window上绑定storage事件来监听存储的数据是否发生变化。比如在一个页面设置了一些数据变化，那么我们用这个页面新建选项页或切换到另外的选项页时，也会同步变化。此对象有五个属性：

  • key,修改或删除Key值，如果调用clear()，key为null
  • newValue，新设置的值或null
  • oldValue，原来的值或null
  • storageArea, 当前的storage对象
  • url，触发函数所在的url
if (window.addEventListener) {
　window.addEventListener('storage', function(e) {
　　console.log(e.key);
　　console.log(e.newValue);
　　console.log(e.oldValue);
　　console.log(e.url);
　　...

　},false);
} else {
　window.attachEvent('onstorage', function(e){
　...
　});
}

最后，要注意的是，有些浏览器开启了隐身模式，本地存储和读取可能会失效。