javascript中sessionStorage 、localStorage 和 Cookie
欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~
参考文章：[JS 详解 Cookie、 LocalStorage 与 SessionStorage](https://www.cnblogs.com/minigrasshopper/p/8064367.html)
下面是个人总结内容：
相同点
用于浏览器端存储的缓存数据
不同点
| 特性 | 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](https://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html)
Web Storage AND Cookie
- 前者存储空间更大
- 前者存储内容不会发送到服务器，防止造成宽带浪费
- 接口丰富
- 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，避免造成数据混乱
- 每个特定的域名下最多生成20个cookie
sessionStorage用于本地存储一个会话存储，关闭会话，随之销毁localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地存储数据而生
一些基本操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
setItem存储value
用于存储对象格式的数据
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "qqqww");
getItem获取value
获取指定关键字段
key本地存储的值
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
removeItem删除key
删除指定关键字段
key本地存储的值
sessionStorage.removeItem("key");
localStorage.removeItem("site");
clear清除所有的key/value
清除所有本地的
key/value
sessionStorage.clear();
localStorage.clear();
其他操作方法：点操作和[ ]
web Storage不但可以用自身的setItem``,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储
var storage = window.localStorage
storage.key1 = "hello"
storage["key2"] = "world"
console.log(storage.key1)
console.log(storage["key2"])
遍历
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历
var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}