基本概念
cookie
cookie是小甜饼的意思，它确实非常小，大小在4kb左右。
cookie主要用途是保存登录信息，比如登录某个网站可以看到“记住密码”，通常是在cookie中存入一段辨别用户身份的数据来实现的。
localstorage
这是html5的新特性，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
sessionstorage
sessionstorage与localstorage的接口类似，但保存数据的生命周期不同。
它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在，但当页面关闭后，sessionstorage中的数据就会被清空。
三者的异同
| 特性 | cookie | localstorage | sessionstorage |
|---|---|---|---|
| 数据的生命周期 | 可设置失效时间，默认是浏览器关闭后就失效 | 可以永久存储，除非手动清除 | 当关闭页面或者浏览器时，才会清除 |
| 存放数据大小 | 4kb | 5M | 5M |
| 与服务端进行通信 | 携带在http头中，如果使用cookie保存过多数据，会带来性能问题 | 仅在客户端（浏览器）中，不参与和服务器的通信 | 仅在客户端（浏览器）中，不参与和服务器的通信 |
| 易用性 | 需要程序员自己封装，源生的cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
应用场景
cookie: 用户是否登录
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~
localstorage: 购物车，html5游戏产生的一些本地数据
sessionstorage： 表单提交
如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。