HTML5规范的本地存储以及几种存储方式的优缺点及适用场景
web storage 实际是HTML4cookies存储的一个改进版。然而两种机制的功能是不同的,那么我们就开始以下的学习吧 ~
-
storage特点(sessionStorage,localStorage):
-
- 存储容量5M
- 客户端完成,不会请求服务器处理
-
sessionStorage数据是不共享、 localStorage共享、
- api相同
-
getItem //取记录
-
setIten//设置记录
-
removeItem//移除记录
-
key//取key所对应的值
-
clear//清除所有
-
- 存储内容
- 只要是能序列化成字符串的内容都可以存储
- 浏览器支持情况:
- 基本现代浏览器都支持
sessionStorage:
-
-
生命周期:会话期间内有效;
- 不同浏览窗口数据不共享;
-
localStorage:
-
- 信息存储在本地,并且数据将永久存储,除非用户删除、
- 不同浏览器数据共享
- localStorage是域内安全的,所以不同浏览器之间保存的数据是不同的
storage事件监听:
在对数据进行改变的窗口对象上是不会触发的
注:session同窗口才可以,例子:iframe操作
window.addEventListener( 'storage',function(e){
console.log( e.key )//修改或删除的key值
console.log( e.newValue )//新存储的值
console.log( e.oldValue )//调用改变前的value
console.log( e.storageArea )//当前的storage对象
console.log( e.url )//触发该脚本变化的文档的url
} );
-
cookie:
-
-
特性
- cookie可以实现跨页面全局变量
cookie可以跨越同域名下的多个网页,但不能跨越多个域名使!用
同一个网站中所有页面共享一套cookie
可以设置有效期限
存储空间4-10KB左右
- cookie可以实现跨页面全局变量
-
常用场合:
-
保存用户登录状态;
-
跟踪用户行为;
-
定制页面;
-
创建购物车 …等等
-
-
缺点
- cookie可能被禁用;
- cookie与浏览器相关,不能互相访问;
- cookie可能被用户删除;
- cookie安全性不够高;
- cookie存储空间很小(只有4–10KB左右)
-