HTML5 localStorage and sessionStorage

HTML5 提供两种web存储方法，localStorage 与 sessionStorage

localStorage 与 sessionStorage 差别

localStorage没有过期时间。仅仅要不clear或remove。数据会一直保存。

sessionStorage 针对一个session进行数据存储，生命周期与session同样，当用户关闭浏览器后，数据将被删除。

特点：

1.localStorage 默认支持的容量为一个站5M，当调用setItem超过上限时。会触发QuotaExceededError异常。当然有些浏览器支持改动容量上限。但为了兼容其它浏览器。最好按5M的容量来使用。

2.localStorage 是以key-value形式保存数据的，key和value仅仅能是字符串格式。因此数字1保存后，会转换成字符串1。

3.localStorage 的写入与读取写法有下面几种：

localStorage.name = 'fdipzone';
name = localStorage.name;

localStorage['name'] = 'fdipzone';
name = localStorage['name'];

localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');

localStorage[key] = value写法主流浏览器都支持，官方并没有说明那一种写法是标准。

但假设运行下面的代码就使localStorage失效。

localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;

因此，建议使用setItem(), getItem(), removeItem(), clear()来实现写入。读取，删除，清空。

4.假设要保存非字符串的内容，建议使用JSON来处理。写入数据时用JSON.stringify转成字符串。读取数据时用JSON.parse把字符串转为之前的格式。

样例1：

样例2：使用 JSON.stringify 和 JSON.parse 封装数据



监听localStorage的值。当发生变化时同步页面数据


当调用setItem(), removeItem(), clear() 时，能够监听这些事件。方便不同的页面之间更新数据。


// 监听数据变化,当数据发生变化时,同步数据显示
window.onstorage = function(event){
	var status = {}
	status.key = event.key;
	status.oldValue = event.oldValue;
	status.newValue = event.newValue;
	status.url = event.url;
	status.storage = event.storageArea;

	// 运行同步数据处理...
}


页面数据同步样例：点击查看