localStorage和sessionStorage

浏览器在Window对象上定义了两个属性： localStorage和sessionStorage。这两个属性都代表同一个Storage对象——一个持久化关联数组，数组使用字符串来索引，存储的值也是字符串形式的。

localStorage和sessionStorage两者的区别在于存储的有效期和作用域不同。

1.存储有效期和作用域

localStorage存储的数据是永久性的，除非web应用刻意删除数据。

localStorage的作用域是限定在文档源级别的。文档源是通过协议、主机名以及端口三者来确定的。

如下每个URL都拥有不同的文档源：

http://www.example.com

https://www.example.com

http://static.example.com

http://www.example.com:8000

同源的文档间共享同样的localStorage数据。需要主要的是localStorage的作用域也受浏览器供应商限制（例如：如果使用Firefox访问站点，那么下次使用Chrome再次访问的时候，那么本次是无法获取上次存储的数据的）。

sessionStorage存储的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了。

sessionStorage的作用域也是限定在文档源中，不仅如此，sessionStorage的作用域还被限定在窗口中。如果同源的文档渲染在不同的浏览器标签页中，那么它们互相之间拥有的是各自的sessionStorage数据，无法共享。（这里所提到的基于窗口作用域的sessionStorage指的窗口只是顶级窗口，如果一个浏览器标签页包含两个<iframe>元素，它们所包含的文档是同源的，那么这两者之前是可以共享的）

2.存储API

localStorage和sessionStorage可以被当做普通的js对象使用，通过设置属性值来存储字符串值，查询该属性来读取该值。

更加正式的API:

setItem()：将对应的名字和值传递进去，可以实现数据存储。

getItem()：将名字传递进去，可获取对应的值。

removeItem()：将名字传递进去，可以删除敌营的数据。

clear()：不需要参数。删除所有存储的数据。

使用length属性和key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字。

示例(同样适用于sessionStorage)：

localStorage.setItem("x", 1);

localStorage.getItem("x");

// 枚举所有存储的名字/值对

for(var i=0; i<localStorage.length; i++) {

    var name = localStorage.key(i);

    var value = localStorage.getItem(name);

}

localStorage.removeItem("x");

localStorage.clear();