localStorage、sessionStorage用法总结

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

同源的判断规则：

http://www.test.com

https://www.test.com （不同源，因为协议不同）

http://my.test.com（不同源，因为主机名不同）

http://www.test.com:8080（不同源，因为端口不同）

localStorage和sessionStorage使用时使用相同的API：

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值

枚举localStorage的方法：

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

     var name = localStorage.key(i)​;

     var value = localStorage.getItem(name);​

}

删除localStorage中存储信息的方法：

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

常用的接口:

• sessionStorage.getItem(key):获取指定key本地存储的值
• sessionStorage.setItem(key,value)：将value存储到key字段
• sessionStorage.removeItem(key):删除指定key本地存储的值
• sessionStorage.length是sessionStorage的项目数

• 这其中包含许多有用的属性：

  • storageArea: 表示存储类型（Session或Local）
  • key:发生改变项的key
  • oldValue: key的原值
  • newValue: key的新值
  • url*: key改变发生的URL

    * 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性
    如果调用clear()方法，那么key、oldValue和newValue都会被设置为null。
    PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.