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会随着会话结束而被清除,需要注意。