几种存储方式的优缺点及适用场景
-
storage特点(sessionStorage,localStorage):
-
- 存储容量5M
- 客户端完成,不会请求服务器处理
-
sessionStorage数据是不共享、 localStorage共享、
- api相同
-
getItem //取记录
-
setIten//设置记录
-
removeItem//移除记录
-
key//取key所对应的值
-
clear//清除记录
-
- 存储内容
- 只要是能序列化成字符串的内容都可以存储
sessionStorage:
-
-
作用于当前的页面,新开页面或者关闭页面时候,数据消失;
- 不同浏览窗口数据不共享
-
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左右)