- 在之前的文章中已经介绍到了前端存储方案中的cookie。但是cookie的存储上限是4KB。如果超过了4KB,在获取cookie的时候会返回空值。
- 那如果存储内容超过4kb,我们该如何处理呢?
- 这里我们将分别介绍几种前端存储方式:localStorage,sessionStorage,websql和indexeddb。
- 是被W3C标准化之后的网页存储的一种方式,原本是属于html5的存储方案,后来被独立出来,适用于IE 8 + ,FF 2 + ,Safari 4 + ,chrome 4 + ,Opera 10.50 + 。(意思就是PC上和H5都可以愉快的使用啦~)
- localStorage.getItem(key) 获取指定key本地存储的值
- localStorage.setItem(key,value) 将value存储到key字段
- localStorage.removeItem(key) 删除指定key本地存储的值
- 首先,我们进入浏览器看下localStorage长什么样子。
- 对,就是这么就简单,k / v组成,和cookie的区别还是挺大的。没有path time等等限制。
- 1)存储时间:localStorage的存储周期比sessionStorage长 (这里的sessionStorage我们会在下文中介绍到),如果用户不清理的话,是可以永久存储的。
- 2)访问限制:另外也有访问的限制,localStorage与sessionStorage虽然相似,但是访问限制却不尽相同,localStorage的访问域默认设定为设置localStorage的当前域,其他域名不可以取。这点与sessionStorage相同,但是与sessionStorage不同的是,localStorage设定后,新开tab是可以访问到的。
- 3)大小限制及检测标准建议对于每个domain,localStorage大小为5M,达到限制时浏览器可以去问用户是否允许增加存储空间。
- 4)可以用来干嘛?因为localStorage可以长期存储,只要用户不刻意去清除。那么我们往往可以提前存入一些用户需要访问,而且还是需要服务器加载的文件等等。这样一方面可以加快页面加载速度。另外一方面也可以减少服务器压力。
- 这里说的sessionStorage和localStorage的区别就在于,用户关掉了浏览器的当前页。sessionStorage存储的数据就销毁掉了。
- sessionStorage.getItem(key) 获取指定key本地存储的值
- sessionStorage.setItem(key,value) 将value存储到key字段
- sessionStorage.removeItem(key) 删除指定key本地存储的值
- 当前tab存储的sessionStorage,只能在当前tab页才能访问到,如果打开同样域名的tab去访问之前tab页存储的sessionStorage是无法读取到的。
- 所以sessionStorage是一个tab级别的存储。
- 当然,这么弱的存储功能可以做什么呢?要相信存在即是合理的。
- 最常见的一个功能就是,如果我们在视频网站看视频不小心刷新了某个我们正在播放视频的页面。这个时候视频的进度条会提示你上次播放时间,是否继续上次的播放,其实这个时间就可以保存到sessionStorage。可能这只是比较牵强的一个例子。大概就是这么使用
- 前面讲到了sessionStorage和localStorage。这里介绍的websql与indexeddb和之前的二者是有一定区别的。
- 1)是什么?
- websql更像是关系型数据库,并且使用sql语句进行操作。
- 2) 注意事项
- 虽然现在 websql 已经不再继续维护了, 但是因为 它的起步早,所以兼容性是 异常的OK 的。
- 如果遇到了 兼容性相关的问题,websql 是一个不错的选择。
- 1)是什么?
- 2)访问权限:
- indexedDB和websql在访问权限上和localStorage是一致的。均是只能子啊创建数据库下的域名才能访问,而且不能指定访问域名。
- 3)存储时间:同样是永久,除非用户清除数据
- 4)可以做什么?
- 当我们是在做一个离线应用,或者webapp的时候,可以考虑使用本地数据库中存取数据。如果不存大量的数据的话,其实localStorage就够用了。亦或者,你想把一张用户的皮肤图片之类的大量数据存入客户端缓存起来,localStorage已经不够用了的话,也可以尝试一下websql与indexeddb。
来源: http://www.cnblogs.com/erbingbing/p/7284038.html