cookie localStorage sessionStora

特性

Cookie

cookie.png

• 数据的生命周期：一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
• 存放数据大小：4K左右
• 与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
• 易用性： 需要自己封装，源生的Cookie接口不友好，推荐使用jquery.cookie这个库

localStorage

storage.png

• 数据的生命周期：除非被清除，否则永久保存
• 存放数据大小：仅在当前会话下有效，关闭页面或浏览器后被清除
• 与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器的通信
• 易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

sessionStorage

• 数据的生命周期：仅在当前会话下有效，关闭页面或浏览器后被清除
• 存放数据大小：仅在当前会话下有效，关闭页面或浏览器后被清除
• 与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器的通信
• 易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

localStorage和sessionStorage除了生命周期不同，其他都一致

应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

只要打开控制台，你就随意修改cookie、localStorage、sessionStorage的值。所以千万不要用它们存储你系统中的敏感数据。