20190703——他山之石可以攻玉 关于cookie，LocalStorage 与Session

Cookie
cookie是小甜饼的意思，顾名思义，cookie确实非常小。它的大小被限制为4KB左右，主要用途保存登录信息。比如你登录某个网站市场可以看到记住密码，这就是通常在Cookie中存入一段辨别用户身份的数据来实现的。

localStorage
localStorage是H5标准新加入的技术，并不是跨时代的新东西，早在IE6时代，就有一个叫userData的东西用于本地存储而且考虑到浏览器兼容性，更通用的方案是使用Flash。而如今，localStorage被大多数浏览器所支持，如果你的网站需要支持IE6+，那以userData作为你的polyfill的方案是一种不错的选择。

sessionStorage
sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同，做过后端的开发的同学应该知道session这个词的意思，直译过来是"会话"，而sessionStorage是一个前端的概念，它只是将一部分数据在当前会话中保存下来，刷新页面依旧会存在，但当页面关闭之后，sessionStorage中的数据就会被清空。

应用场景
有了对上面这些差别的直观理解，我们就可以讨论三者的应用场景了。
因为考虑到每个HTTP请求都会带着Cookie的信息，所以Cookie当然是能精简就可以精简了。比较常用的一个应用场景就是判断用户是否登录，针对登录的用户，服务器端会在他登录的时候往Cookie中插入一段加密过的唯一辨识单一用户的辨别码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用Cookie来保存用户在电商网站的购物车信息。如今有了localStorage，似乎在这个方面给cookie放个假了。
而另一个方面localStorage接替了Cookie管理购物车的工作。同时也能胜任其他一些工作。比如H5游戏通常会产生一些本地数据

localStorage和SessionStorage操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

setItem存储value

用途：将value存储到key字段

sessionStorage.setItem("key", "value");     localStorage.setItem("site", "js8.in");

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();