HTML5 的web储存: localStorage & sessionStorage

　　早期的浏览器使用cookie储存，HTML5新增web储存，包括：localStorage 和 sessiongStorage;

localStorage:可以永久储存；

sessionStorage:浏览器关闭后，储存将被删除；

使用前应先检测浏览器是否支持web储存：

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
}
else
{
    // 抱歉! 不支持 web 存储。
}

　　localStorage默认储存空间为：5M。如果容量超出限制，会报出异常：“QUOTA_EXCEEDED_ERR”。现在浏览器支持情况：

👻 localStorage的自带方法：

　　添加键值对：localStorage.setItem(key,value)

　　获取键值：localStorage.getItem(key)

　　删除键值对：localStorage.removeItem(key)

　　清除所有键值对：localStorage.clear()

　　获取localStorage的属性名称：localStorage.key(index)

　　获取数量：localStorage.length

👻 localStorage事件

　　存储事件只是浏览器在localStorage数据变化发生之后给你的一个通知。注意这里的的条件是数据真的发生了变化。也就是说，如果当前的存储区域是空的，你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值，事件也是不会触发的。

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 //showStorage();
}

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

👻  同源的判断规则：

http://www.test.com

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

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

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

👻 web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。