随着web应用程序的出现，产生了对在客户端进行存储能力的要求，我们有时候需要在客户端存储用户的登录信息，偏好等一些用户数据。所以cookie就应运而生了，cookie是原来的网景公司创造的，到现在为止，cookie只是客户端存储数据的一种选项。下面，我们先来看看cookie的来龙去脉。
一 Cookie
HTTP Cookie,通常直接叫做cookie,最初是在客户端用户存储会话信息的，当每次进行http请求时。服务器会返回set-cookie作为相应的一部分，浏览器存储这样的会话信息在之后请求时都会携带这样的会话信息。
HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie:name=value;expires=Mon, 22-Jan-19 07:00:00 GMT;domain=wrox.com;path=/;secure
Other-header: other-header-valuecookie的构成有键值对，过期时间，对应的域，路径以及是否必须https请求（secure）
上面这种cookie存在一些限制：
1.绑定在特定的域名下，其他域名不可以访问
2.每个域的cookie总数是有限的
3.cookie的尺寸也有限制，大多数浏览器都有4096B(加减1)的长度限制
在js中处理cookie是通过BOM接口，即document.cookie,使用document.cookie可以读取cookie,如果设置cookie，使用document.cookie = "name=value",除了设置键值对之外，还有可以设置路径，是否安全，对应域等信息。在JS中可以封装一个工具类来进行cookie的读写和删除操作，或者也可以用jquery封装的cookie操作。
二 webStorage存储机制
cookie存储存在一些限制问题，webStorage是web1.0规范提出的，并最初成为了html5的一部分。在规范中最初定义了sessionStorage和globalStorage对象，在支持的浏览器中都是以window对象属性的形式存在的。Storage类型提供在浏览器环境中存储键值对儿，它的实例对象有clear() getItem(key) setItem(key,value) removeItem(key)等方法。
1.sessionStorage对象
sessionStorage是Storage类型的一个实例，用来存储特定的某个会话的数据，该数据只存储到浏览器关闭。该对象也存在clear() getItem() setItem() removeItem()的方法。
2.globalStorage对象
globalStorage也是Storage的实例，这个对象的目的是跨域会话存储，但是它有一个限制，就是在使用之前必须先指定哪些域可以访问，通过方括号标记属性来实现，如下例子所示：
//设置名称
globalStorage['wrox.com'].name = "linda";
globalStorage['wrox.com'].setItem("book","js")
//读取数据
globalStorage['wrox.com'].name
globalStorage['wrox.com'].getItem("book")如果不使用removeItem()或者delete删除，或者用户未清楚浏览器缓存，存储的数据会一直保存在磁盘上。
3.localStorage对象
localStorage对象在修订过的HTML5规范中最为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何的访问规则，使用localStorage访问和存储数据如下：
//设置名称
localStorage.name = "linda";
localStorage.setItem("book","js")
//读取数据
localStorage.name
localStorage.getItem("book")这里的存储保留到JS删除或者用户清楚浏览器缓存才会被清楚。
以上就是web存储机制的发展和目前的情况，是我们进行前端数据持久化的必备知识。
PS:如果有关cookie的session的区别还不是很清楚，可以参考这里cookie和session的区别