javascript中sessionStorage 、localStorage 和 Cookie
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
参考文章:JS 详解 Cookie、 LocalStorage 与 SessionStorage
下面是个人总结内容:
相同点
用于浏览器端存储的缓存数据
不同点
特性 | Cookie | localStorage | sessionStorage |
数据的生命期 | 可设置的失效时间,到达时间自动过期 | 除非被清除,否则永久保存 | 仅用于当前会话,浏览器关闭,立即被清除 |
存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
与服务器端通信 | 携带在HTTP头中,数据会发送到服务器端,可能造成宽带浪费 | 只在客户端,不参与和服务端的通信 | 只在客户端,不参与和服务端的通信 |
易用性 | 需程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
应用场景
Cookie:
1. 最好精简,因为本身存放数据大小很小
2. 常用于判断用户登录,对于登录过的用户,浏览器会插入一个唯一的标识,当下次用户需要登录,只要读取到这个值,就能判断当前用户是否登录了
localStorage:
1. 购物车管理工作,一些产生的本地数据用以完成数据持久化
sessionStorage:
- 多页面表单,按步骤引导用户填写
安全性
- Cookie、localStorage 和 sessionStorage三者,只要打开控制台,都能看到这三者存放的数据的,并且能够随意修改,所以会产生风险
- 而sessionStorage使用了session加密,这样用户看到的数据都是经过加密处理过的,会难以获取正确的标识
- 但是对于localStorage或者Cookie的数据,就可以被肆意妄为的修改或者伪造了
- 上面是我个人的一些理解,文章中还提到了XSS注入的风险,关于XSS注入为此我专门查了些文档,推荐一篇自我感觉写的相当详细的Web安全测试之XSS
Web Storage AND Cookie
- 前者存储空间更大
- 前者存储内容不会发送到服务器,防止造成宽带浪费
- 接口丰富
- 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,避免造成数据混乱
- 每个特定的域名下最多生成20个cookie
-
sessionStorage
用于本地存储一个会话存储,关闭会话,随之销毁 -
localStorage
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的 -
Cookie
的作用是与服务器进行交互,作为HTTP
规范的一部分而存在 ,而Web Storage
仅仅是为了在本地存储数据而生
一些基本操作
localStorage
和sessionStorage
都具有相同的操作方法,例如setItem
、getItem
和removeItem
等
setItem存储value
用于存储对象格式的数据
|
getItem获取value
获取指定关键字段
key
本地存储的值
|
removeItem删除key
删除指定关键字段
key
本地存储的值
|
clear清除所有的key/value
清除所有本地的
key/value
|
其他操作方法:点操作和[ ]
web Storage
不但可以用自身的setItem`
,getItem`等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储
|
遍历
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage
和localStorage
提供的key()
和length
可以方便的实现存储的数据遍历
|