html5持久化存储之local storage和session storage

Local Storage和Session Storage是html5新增的两个前端存储方式，相对于cookie的存储空间更大，更灵活，可以很方便的通过localStorage和sessionStorage类进行操作。

Local Storage特点：

• 持久化存储
• 数据量大，5M左右，每个浏览器不一致
• 不可跨域读取
• 低版本浏览器不支持，需要IE8以上
• 隐私模式下不可读写
• 没有时间限制，除非浏览器清除本地存储
• 仅支持string类型数据存储

Local Storage操作：

设置键值

//通过localStorage对象的setItem方法设置
window.localStorage.setItem(key,value) 
//通过localStorage属性设置
window.localStorage.key = value
//以上两种方法等效,注意，设置新键值是会自动覆盖旧键值，如需修改需要先读取，修改后再写入。

读取键值

//通过localStorage对象的getItem方法获取键值
window.localStorage.getItem(key) 
//通过localStorage属性获取键值
window.localStorage.key
//以上两种方法等效

删除键值

//通过localStorage对象的removeItem方法删除指定键值
window.localStorage.removeItem(key)

删除所有键值

//通过localStorage对象的clear方法清除所有键值
window.localStorage.clear()

由于local storage只能存储string类型，如果我们需要在其中存储对象，比如我们常用的json，就需要进行JSON.stringify操作之后再存入local storage。

//定义一个JSON对象
var site = {'name':'mr-z','url':'//mr-z.me'};
var stor = window.localStorage;
stor.setItem('siteInfo',site);
window.console.log(stor.getItem('siteInfo'));
//返回[object Object]字符串
//所以正确的写法应该是
stor.setItem('siteInfo',JSON.stringify(site));
window.console.log(stor.getItem('siteInfo'));
//返回site对象转字符串之后信息{"name":"mr-z","url":"//mr-z.me"}
var obj2 = JSON.parse(stor.getItem('siteInfo'));
window.console.log(obj2['name']);
//注意，如果要修改JSON数据，需要将local storage读出，JSON.parse之后修改，然后JSON.stringify之后写入

session storage和local storage操作完全一致，将以上实例中localStorage改为sessionStorage即可。

不过session storage会随着会话结束而被清除，需要注意。