Web Storage：浏览器端数据储存机制

Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。

sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（一般是窗口关闭），数据被清空；
localStorage保存的数据长期存在，下一次访问该网站的时候，网页能够直接读取之前保存的数据。

若用户禁用第三方cookie，那么将不容许来自第三方IFrames对Web Storage的访问。（从Firefox 43版本开始实行）
本地存储不一样于mozStorage（Mozilla's XPCOM interfaces to SQLite）或Session store API（an XPCOM storage utility for use by extensions）。

保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。全部的数据都是以文本格式保存。

每一个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。Firefox 中，a.example.com和b.example.com共享 5MB 的存储空间。与 Cookie 同样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取，若是跨域操做会报错。

属性和方法

Storage 接口只有一个属性。
Storage.length：返回保存的数据项个数。

window.localStorage.setItem('foo', 'a');
window.localStorage.setItem('bar', 'b');
window.localStorage.setItem('baz', 'c');
window.localStorage.length // 3

Storage.setItem()

---

Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。若是键名已经存在，该方法会更新已有的键值。该方法没有返回值。

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

Storage.setItem()两个参数都是字符串。若是不是字符串，会自动转成字符串，再存入浏览器。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[object Object]"

若是储存空间已满，该方法会抛错。

直接赋值也是能够的：

// 下面三种写法等价
window.localStorage.foo = '123';
window.localStorage['foo'] = '123';
window.localStorage.setItem('foo', '123');

Storage.getItem()

Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。若是键名不存在，该方法返回null。

window.sessionStorage.getItem('key')window.localStorage.getItem('key')

键名应该是一个字符串

Storage.removeItem()

Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名做为参数，若是键名不存在，该方法不会作任何事情。

sessionStorage.removeItem('key');localStorage.removeItem('key');

Storage.clear()

Storage.clear()方法用于清除全部保存的数据。该方法的返回值是undefined。

window.sessionStorage.clear()

Storage.key()

Storage.key()接受一个整数做为参数（从零开始），返回该位置对应的键值。

window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"

//结合使用Storage.length属性和Storage.key()方法，能够遍历全部的键。
for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));}

storage 事件

Storage 接口储存的数据发生变化时，会触发 storage 事件，能够指定这个事件的监听函数。

window.addEventListener('storage', onStorageChange);

监听函数接受一个event实例对象做为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。
StorageEvent.key：字符串，表示发生变更的键名。若是 storage 事件是由clear()方法引发，该属性返回null。
StorageEvent.newValue：字符串，表示新的键值。若是 storage 事件是由clear()方法或删除该键值对引起的，该属性返回null。
Storage.oldValue：字符串，表示旧的键值。若是该键值对是新增的，该属性返回null。
Storage.storageArea：对象，返回键值对所在的整个对象。也说是说，能够从这个属性上面拿到当前域名储存的全部键值对。
Storage.url：字符串，表示原始触发 storage 事件的那个网页的网址。

function onStorageChange(e) {
  console.log(e.key);}
window.addEventListener('storage', onStorageChange);

它不在致使数据变化的当前页面触发，而是在同一个域名的其余窗口触发。也就是说，若是浏览器只打开一个窗口，可能观察不到这个事件。好比同时打开多个窗口，当其中的一个窗口致使储存的数据发生改变时，只有在其余窗口才能观察到监听函数的执行。能够经过这种机制，实现多个窗口之间的通讯。

例子

function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (localStorage.clickcount)
        {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
        else
        {
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
    }
}