前端存储技术

随着 Web 应用程序的出现，也产生了在客户端存储用户信息的要求，包括登录信息，偏好设定或者其他数据。客户端存储包括 Cookie，Web存储机制和 IndexedDB 等方式。

基本概念

Cookie 是小甜饼的意思，它确实很小，它的大小限制为4kb左右， 指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），是为了解决 HTTP 无状态的特性而出现的。

Cookie 示例代码

localStorage 是 HTML5 标准中新加入的技术。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持。

localStorage 示例代码

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

sessionStorage 示例代码

三者的异同

特性	Cookie	localStorage	sessionStorage
生命周期	一般由服务器通过Set-Cookie字段生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除（现代浏览器已经具备了重新打开最近关闭的标签页后恢复上次浏览会话的功能）
存放数据大小	4kb左右（一般不超过4095字节）	一般为5MB	一般为5MB
与服务器通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信

应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。

曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。

如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

参考资料：

Web 前端实现本地存储
浅谈前端存储
聊一聊前端存储那些事儿
详说 Cookie, LocalStorage 与 SessionStorage
Window.localStorage
Window.sessionStorage
HTTP cookies