HTML5 API详解（9）:大家都知道的 localStorage 本地存储

提到本地存储localStorage就不得不提sessionStorage和cookie这两个。其中localStorage和sessionStorage可以合成称为web Storage。

这里比较一下cookie和web Storage：

cookie：容量4kb，各种浏览器都支持，但每次请求都会把本地存的cookies发送到服务器。

web Storage：存储空间更大，数据仅存在本地，不与服务器发生交互，独立的存储空间。

而localStorage和sessionStorage的区别：

localStorage：同源（相同个域名、协议和端口）的数据会长时间保存下来，即使浏览器关掉了也不受影响。

sessionStorage：数据存储在窗口对象中，对于浏览器其他窗口或者新标签不可见。窗口关闭，数据丢失。

localStorage的使用：

1.设置键值对：localStorage.setItem('name','value'); 还有对象简易的写法：localStorage.name = value或者localStorage['name'] = value;

2.获取指定键值对：localStorage.getItem('name');

3.删除指定键值对：localStorage.removeItem('name');简易的写法：delete localStorage['name'];

4.删除同源下的所有键值对：localStorage.clear();

5.获取所有键值对的总数长度：localStorage.length;

6.获取键值对的key：localStorage.key(indexNum);

7.storage事件，当localStorage的键值对发生变化的时候，就会触发storage事件

if (window.addEventListener) {

window.addEventListener("storage", handlerStorage, false);

} else {

window.attachEvent("onstorage", handlerStorage); //IE浏览器

};

事件触发之后会传一个对象作为参数给处理函数，其中主要用到的对象属性有：

{

url:'当前window的url',

key:'键',

newValue:'新值',

oldValue:'旧值',

timeStamp:'时间戳',

type:'storage'

}

PS:storage事件，在当前窗口或者标签下是不会触发的，确实如此，由此可见，storage事件是用于localStorage中的数据改变的时候，用来通知同源下的其他窗口和标签的。