Cookie、sessionStorage、localStorage的区别

这是我参与更文挑战的第8天，活动详情查看： 更文挑战

emmm...固然不是上面的小 cookie 啦

客户端能够经过 cookie 与服务端进行数据交互，WebStorage 能够克服由cookie所带来的一些限制，当数据须要被严格控制在客户端时，不须要持续的将数据发回服务器，提供一种cookie以外存储大量能够跨会话存在的数据的方式。

Cookie

cookie 数据始终在同源的http请求中携带，即 cookie 在浏览器和服务器间来回传递。cookie 数据还有路径（path）的概念，能够限制 cookie 只属于某个路径下，存储的大小很小只有4K左右。 （key：能够在浏览器和服务器端来回传递，存储容量小，只有大约 4 KB 左右）。

localStorage

localStorage 是 HTML5 标准中新加入的技术，localStorage 不会自动把数据发给服务器，仅在本地保存。数据始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据。

sessionStorage

sessionStorage 与 localStorage 的接口相似，但保存数据的生命周期与 localStorage 不一样。仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持。

上图对比

场景

由于考虑到每一个 HTTP 请求都会带着 Cookie 的信息，因此 Cookie 固然是能精简就精简啦

比较经常使用的一个应用场景就是判断用户登陆状态， 例如将用户id存储于一个cookie内，服务器端会在他登陆时往 Cookie 中插入一段加密过的惟一辨识单一用户的辨识码，这样当用户下次只要读取这个值就能够判断当前用户是否登陆，如今不少论坛和社区都提供这样的功能。 cookie还能够设置过时时间，当超过期间期限后，cookie就会自动消失。所以，系统每每能够提示用户保持登陆状态的时间：常见选项有一个月、三个 月、一年等。

还能够用来跟踪用户行为， 例如一个天气预报网站，可以根据用户选择的地区显示当地的天气状况。若是每次都须要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统可以记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气状况。由于一切都是在后 台完成，因此这样的页面就像为某个用户所定制的同样，使用起来很是方便定制页面。若是网站提供了换肤或更换布局的功能，那么可使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然能够保存上一次访问的界面风格。

曾经还使用 Cookie 来保存用户在电商网站的购物车信息，现在有了 localStorage 接替 Cookie 管理购物车的工做，同时也能胜任其余一些工做。好比HTML5游戏一般会产生一些本地数据，localStorage 也是很是适用的。若是遇到一些内容特别多的表单，为了优化用户体验，咱们可能要把表单页面拆分红多个子页面，而后按步骤引导用户填写。这时候 sessionStorage 的做用就发挥出来了。

安全性

须要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，须要时刻注意是否有代码存在 XSS 注入的风险。由于只要打开控制台，你就随意修改它们的值，也就是说若是你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。因此千万不要用它们存储你系统中的敏感数据。

共同点

Cookie、localStorage 和 sessionStorage 都是保存在浏览器端，而且是同源的。