1.背景介绍

什么是Cookie？

Cookie 是小饼干的意思。cookie 确实非常小，它的大小限制为4KB左右， 是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准， 所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。 它的主要用途有保存登录信息， 比如你登录某个网站市场可以看到“记住密码”， 这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

什么是localStorage？

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

什么是sessionStorage？

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

2.知识剖析

cookie的特性

一个cookie的设置以及发送过程分为以下四步：

①客户端发送一个http请求到服务器端
②服务器端发送一个http响应到客户端，其中包含Set-Cookie头部
③客户端发送一个http请求到服务器端，其中包含Cookie头部
④服务器端发送一个http响应到客户端

local storage和session storage主要通过在js中操作这两个对象来实现， 分别为window.localStorage和window.sessionStorage。这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

Storage类的相关成员如下：

3.常见问题

cookie的优点

4.解决方案

极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小。

通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

6.拓展思考

三者的使用场景

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据,也可以用来统计页面访问次数。

Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。也可以用来统计当前页面元素的点击次数。比如杀人游戏

cookie，判断用户是否登陆过网站，以便下次登录时能够实现自动登录。如果我们删除cookie，则每次登录必须重新填写登录的相关信息。比如页面一键换色，下次打开是换后的颜色。

7.参考文献

参考一:sessionStorage会话存储

参考二:详说 Cookie, LocalStorage 与 SessionStorage - 思否

参考三:jquery.cookie.js 使用方法