【javascript】cookie session localStorage sessionStorage的区别

背景

• 这个问的比较多，怕以后忘了，总结复习下。

cookie

• 由于http是认不得来访者的，所以就想出了cookie这个解决办法：就是你来我这，我给你办张卡，你下次来凭卡认你。

• 这个cookie是存在浏览器上的，浏览器可以篡改，于是有人想了个办法，做签名，就是在本来的数据后面加一串加密后的码，如果你改了，后面的码和当前这个值不匹配，那么服务器就不认。这个只能相对安全一点。设置签名一般服务端用加盐算法在值后面拼个点和算出来的值，取值的时候就通过同样算法把值取出来，通过点进行分割，对比是不是等于后面的值。另外如果是用base64显示注意部分符号问题

• http头最多能放4k，所以最多cookie大小4k。

• 不同浏览器对cookie数量有不同限制，最少貌似是opera限制30个，ie火狐限制50个，chrome无限制。

• 设置domain可以用res.setHeader('Set-Cookie',['name=111; domain=.xxx.cn']))表示name属性在xxx域名下生效（二级生效）。

• 设置path可以用res.setHeader('Set-Cookie',['name=111; path=/xx'])表示name属性在/xx下路径生效。

• 设置过期时间用res.setHeader('Set-Cookie',['name=111; max-age=10'])表示name属性10秒过期，expires同理。设置了过期时间的cookie关了浏览器还存在，没设置的关了就没了

• 设置httpOnly可以用res.setHeader('Set-Cookie',['name=111; httpOnly=true'])表示这个值无法用代码获取到。这个值设置出来浏览器上相应位置会打个对勾。取不到就是客户端用document.cookie拿不到这个值。

session

• 从上面cookie第一条发现，光有cookie数据容易不安全，所以就有了session。
• 想象一下，你是有篡改卡数据能力的，我把卡发给你，卡里存着你能消费的金额，你把金额改了，那我不是亏大了？所以真正的金额必须存在我这里，我把卡发给你，里面就一个卡号，你拿着卡消费，我对着卡号查到你金额到底有多少。这就是session。当然别人伪造你的卡号拿我这消费那就是csrf攻击。
• session大小限制一般是内存，一般重启消失。
• session一般就是服务器上一个对象，为保证不重复可能拿uuid之类弄key，通过第二点可以发现session实际上是基于cookie的，因为cookie就是那个卡，所以也可以结合cookie的第二点做签名增加安全性。
• 所以session不能写太多，否则流量太大导致内存不够。

localStorage

• 存在本地，不能跨域，默认不销毁，要手动清除。
• 大小不能超5m
• 不传输所以不消耗流量

sessionStorage

• tab页关闭就没了。
• 大小不能超5m
• 不传输所以不消耗流量

总结

• cookie主要适合存比较小的东西，比如上次查看的页面，浏览次数之类。
• session适合购物车之类比较大又得记录状态的东西。
• sessionStorage适合关页面就不存在的数据。
• localStorage适合长期存在的数据。