关于cookie和webstorage

Cookies

Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。Cookie名称和值可以由服务器端开发自己定义，对于JSP而言也可以直接写入jsessionid，这样服务器可以知道该用户是否是合法用户以及是否需要重新登录等，服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态

• 限制

1. Cookie是绑定在特定的域名下的，当设定一个cookie之后再给创建它的域名发送请求时，都会包含这个cookie，这个限制确保了储存在cookie中的信息只能让批准的接受者访问，而无法被其他域访问
2. 每一个域的cookie的总数都是有限的，数量因浏览器而异
3. 浏览器对于cookie的尺寸也是有限制的，大多数浏览器都有大约4096B的长度限制

• Cookie的构成

1. 名称name：唯一的，经URL编码的
2. 值valua：经URL编码的
3. 域domain：指定cookie对哪个域有效，并对其子域也有效。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
4. 路径path：Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”
5. 失效时间expire：表示cookie何时被删除的时间戳，采用GMT格式的日期。默认情况下浏览器的会话结束时就会自动删除所以cookie，但是如果自己设置了失效时间，cookie可以在浏览器关闭之后的依然保存在用户的机器上直到失效时间。如果设置的失效时间是过去的时间，cookie会被立即删除。
6. 安全标志secure： 

Webstorage

Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。Web Storage又分为两种：

•  sessionStorage

• • 以域名为单位进行数据划分
  • 同域下的所有页面一起共享这些数据
  • 对数据的改动会导致同时共享这些数据的其他页面触发storage事件

•  localStorage

• • 以每个“顶级页面（top-level browsing context）”为单位
  • 在所有同域的“子页面”中共享这些数据（对数据的改动会触发storage事件）
  • 为所有同域的以下“顶级页面”拷贝这些数据（通过超链接新打开的页面、通过脚本新打开的页面）

从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地，除非主动删除数据，否则数据是永远不会过期的；不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法：

1.  保存数据：localStorage.setItem( key, value );      sessionStorage.setItem( key, value );
2.  读取数据：localStorage.getItem( key );     sessionStorage.getItem( key );  
3.  删除单个数据：localStorage.removeItem( key );     sessionStorage.removeItem( key );
4.  删除所有数据：localStorage.clear( );     sessionStorage.clear( );
5.  得到某个索引的key：localStorage.key( index );     sessionStorage.key( index );

Web Storage 的事件(event) (当储存区的资料发生异动时，会触发storage事​​件)

1. key：被改变的key 名称。
2. oldValue：被改变的key 对应的原始资料。
3. newValue：被改变的key 对应的新资料。
4. url：被改变的key 原始网址。
5. storageArea：被改变的Storage 物件。

• 注意事项：注册storage事件和触发storage事件的动作，须在两个页面

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。