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

2018年8月20日22:59:01 发表评论 828 次
摘要

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

Local Storage特点:

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

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

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: