html5 本地存储

Dive into HTML5

在HTML5之前，Web应用一般只能使用Cookie将数据存储在用户计算机，每次请求都携带被存储的数据，这使得Cookie的性能并不好；而且Cookie的使用有限制，比如最多只能存储4K的数据，于是HTML5引入了两种在客户端存储数据（本地存储）的方法：localStorage 和 sessionStorage。

• localStorage ：没有时间限制的数据存储
• sessionStorage ：针对一个 session 的数据存储（浏览器关闭后数据会丢失）

相对于Cookie，本地存储更安全并可以存储比较大的数据（至少5M），而且数据永远不会传递到服务器，这样便不会影响网站性能。不同的网站数据存储于不同的区域，并且一个网站只能访问其自身的数据。

下面是本地存储API的浏览器兼容情况：

API	Chrome	IE	Firefox	Safari	Opera
Web Storage	4.0	8.0	3.5	4.0	11.5

可以看到，HTML5本地存储的浏览器兼容情况良好，甚至IE8都支持，因此在不考虑IE6~7的项目中我们可以放心地使用HTML5本地存储API。

从上面的描述中了解到HTML5本地存储包含两种方式：localStorage 和 sessionStorage，其实它们分别对象两个javascript对象：window.localStorage 和 window.sessionStorage，下面分别学习一下。

localStorage对象

localStorage 对象存储的数据永远不会过期，浏览器关闭时也不会被删除。它具有以下几个方法：

• setItem(key, value)：将value以key为键值存储
• getItem(key)：取出key键对应的值
• removeItem(key)：删除key键值对应的值
• clear()：清除所有的本地 localStorage 存储
• key(index)：获取指定位置的键值

除了上面介绍的几个方外外，localStorage 对象还可以使用点（.）操作符或者中括号（[]）来操作数据，这与javascript中的对象操作是一致的。

localStorage 对象存储的数据value必须是字符串，或者可以变成字符串的数据

另外，localStorage 对象还有一个length属性，可用配合key()方法来遍历对象数据。

(function () {
    localStorage.setItem('myKey-1', '春天来了.');
    localStorage['myKey-2'] = '你还在等什么?';
    if (!localStorage.myKey3) {
        localStorage.myKey3 = 0;
    }
    localStorage.myKey3 = parseInt(localStorage.myKey3) + 1;
    
    document.getElementById('local-storage-p1').innerText = `访问了${localStorage.myKey3}次本页面。`;
    let str = '';
    for (let i = localStorage.length - 1; i >= 0; i--) {
        let key = localStorage.key(i);
        str += `${key}：${localStorage[key]}\n`
    }
    document.getElementById('local-storage-p2').innerText = str;
    console.log(localStorage);
    setTimeout(function() {
        localStorage.clear();
        console.log(localStorage);
    }, 500);
})();

上面是一段测试代码，刷新页面访问次数一直累加，即使关闭浏览器再重新打开，该次数依然累计；另外，可以打开浏览器开发者工具查看 localStorage 对象的结构及clear()方法的作用。

sessionStorage对象

sessionStorage 对象针对一个session进行数据存储，当用户关闭浏览器后，存储的数据将被删除，sessionStorage 对象的API与 localStorage 对象完全一致。

(function() {
    sessionStorage.setItem('myKey-1', '北京欢迎你.');
    sessionStorage['myKey-2'] = '为你开天辟地.';
    
    if (!sessionStorage.myKey3) {
        sessionStorage.myKey3 = 0;
    }
    sessionStorage.myKey3 = parseInt(sessionStorage.myKey3) + 1;
    
    document.getElementById('session-storage-p2').innerText = `您访问了${sessionStorage.myKey3}次本页面。`;
    let str = '';
    for (let i = 0; i < sessionStorage.length; i++) {
        let key = sessionStorage.key(i);
        str += `${key}：${sessionStorage[key]}\n`
    }
     document.getElementById('session-storage-p1').innerText = str;
})();

可以看到 sessionStorage 对象的API与 localStorage 一致的，只是存储数据的过期时间不同；如果我们关闭浏览器（标签页），myKey3将会重置。

onstorage事件

HTML5还提供了 onstorage 事件，对 localStorage 对象或者 sessionStorage 对象的任何修改都会在window对象上触发该事件。

事件对象的属性如下：

属性	类型	说明
key	DOMString	发生改变数据的键名
oldValue	DOMString	改变之前的数据，添加操作的话为null
newValue	DOMString	改变后的数据，删除操作的话为null
storageArea	nsIDOMStorage	受影响的Storage对象
url	DOMString	键值发生改变文档的URL

事件监听测试不成功，不知原因

(function() {
    window.addEventListener('storage', function(e) {
        console.log(e);
    }, false);
    localStorage.setItem('event-1', 'hello, storage.');
    localStorage.clear();
})();