javascript中sessionStorage 、localStorage 和 Cookie

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

参考文章：[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：

1. 多页面表单，按步骤引导用户填写

安全性

1. Cookie、localStorage 和 sessionStorage三者，只要打开控制台，都能看到这三者存放的数据的，并且能够随意修改，所以会产生风险
2. 而sessionStorage使用了session加密，这样用户看到的数据都是经过加密处理过的，会难以获取正确的标识
3. 但是对于localStorage或者Cookie的数据，就可以被肆意妄为的修改或者伪造了
4. 上面是我个人的一些理解，文章中还提到了XSS注入的风险，关于XSS注入为此我专门查了些文档，推荐一篇自我感觉写的相当详细的[Web安全测试之XSS](https://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html)

Web Storage AND Cookie

1. 前者存储空间更大
2. 前者存储内容不会发送到服务器，防止造成宽带浪费
3. 接口丰富
4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，避免造成数据混乱
5. 每个特定的域名下最多生成20个cookie
6. sessionStorage用于本地存储一个会话存储，关闭会话，随之销毁
7. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
8. 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); 
}