教程
http://www.cnblogs.com/st-leslie/p/5617130.html
http://jerryzou.com/posts/cookie-and-web-storage/
localStorage / session / cookie 的异同
| 特性 | Cookie | localStorage | session |
|---|---|---|---|
| 数据的生命周期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成的 Cookie,默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后清除 |
| 存放数据的大小 | 4kb | 5M | 5M |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在浏览器中保存，不参与和服务器的通信 | 仅在浏览器中保存，不参与和服务器的通信 |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，也可再次封装 | 源生接口可接受，也可再次封装 |
应用场景
因为每个 HTTP 请求都会携带 Cookie 信息，所以 Cookie 一般用来判断用户是否登录。针对登录过的用户，服务器会在登录时往 Cookie 中插入一端加密过的单一用户的标识码。下次只要读取这个值就能判断用户是否登录。
localStorage 存储一些本地数据，这些数据一般是不经常改变的。
如果是数据是经常改变的，那使用 Session 作为缓存更有效。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
安全性
不是什么数据都适合存放在 Cookie 、localStorage 和 Session 中的。使用它们需要防范 XSS 注入的风险。因为打开 控制台，就能随意修改它们的值。
API
- 更新元素
localStorage.setItem("mycat", "Tom");
- 获取元素
localStorage.getItem("myCat");
- 移除元素
localStorage.remove("myCat");
- 清除 localStorage 中所有的元素
localStorage.clear();
