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 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。