cookie
http是无状态协议，它不对之前发生的请求和响应的状态进行管理。也就是说，无法根据之前的状态进行本次的请求处理。假设要求登录认证的 Web 页面本身无法进行状态的管理（不记录已登录的状态），那么每次跳转新页面不是要再次登录，就是要在每次请求报文中附加参数来管理登录状态。
cookie 技术通过在请求和响应报文中写入 cookie 信息来控制客户端的状态。
服务器端发现客户端发送过来的 cookie 后，会去检查究竟是从哪一个客户端发过来的连接请求，然后对比服务器上的记录，最后得到之前的状态信息。
大多数需要登录的网站在用户验证成功之后都会设置一个 cookie，只要这个 cookie 存在并可以，用户就可以自由浏览这个网站的任意页面。
cookie的类型
- 会话cookie，用户退出浏览器时，会话就被删除了。
- 持久cookie，生存时间更长一些；它们存储在硬盘上，浏览器退出，计算机重启时它们仍然存在。
cookie的使用
可以参照HTTP cookies 详解
cookie是如何工作的
用户首次访问Web站点时，Web服务器对用户一无所知。Web服务器希望这个用户会再次回来，所以想给这个用户贴上（通过Set-Cookie）一个独有的cookie，这样以后它就可以识别出这个用户了。
不同站点使用不同cookie
浏览器只向服务器发送服务器产生的那些cookie。A.com产生的cookie会被发送给A.com，不会发送给B.com或C.com。
cookie的域属性
domain属性规定了哪些站点可以看到该cookie。如果不指定，默认为当前文档的主机（不包含子域名）。如果指定了Domain，则一般包含子域名。比如domain为travel.com的cookie，可以被www.travel.com、a.travel.com或任意以.travel.com结尾的站点看到。
cookie路径属性
在这个属性列出的URL路径前缀下所有cookie都是有效的。
例如：网站www.A.com下有一份cookie（user=ann;domain="A.com"），www.A.com/travel/路径下用一个独立的cookie（travel=England;domain="A.com";path=/travel/）记录了用户的旅游信息。
如果用户访问http://www.A.com/specials.html，就只会获得这个cookie：
user=ann
但如果访问http://www.A.com/travel/list.html，就会获得这两个cookie：
user=ann
travel=England
sessionStorage、localStorage
sessionStorage和localStorage都是html5的新特性。用来在客户端存储用户数据。与cookie的不同表现在以下方面：
| cookie | sessionStorage | localStorage |
|---|---|---|
| 一个cookie最多存4k的内容 | 可以存5M的内容 | 可以存5M的内容 |
| 可以由服务器生成，发送请求时会附带在请求头上 | 只能在客户端操作 | 只能在客户端操作 |
| 可以设置失效时间，设置后到了指定时间会自动清除，不设置的话浏览器关闭立即失效 | 浏览器关闭或标签页关闭立即失效 | 永久有效 |
| 可以设置domain，path，指定哪些域或路径下可访问，可以设置httponly，限制修改操作 | 无 | 无 |
sessionStorage只是可以将数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
使用：
sessionStorage.setItem('name', 'ann'); // 以键值对的形式存储内容
sessionStorage.getItem('name'); // 取内容
sessionStorage.removeItem('name'); // 移除内容
sessionStorage.clear(); // 清空sessionStorage
localStorage的同理。
| sessionStorage | localStorage |
|---|---|
| 数据会保存到存储它的窗口或标签页关闭时 | 数据的生命期比窗口或浏览器的生命期长 |
| 数据只在构建它们的窗口或标签页内可见 | 数据可被同源的每个窗口或者标签页共享，cookie也是 |
更新Web Storage后的通信
某些复杂情况下，多个网页、标签页或Worker都需要访问存储的数据。此时，应用程序中可能会在存储数据被修改后触发一系列操作。对于这种情况，HTML5 Web Storage API内建了一套事件通知机制，它可以将数据更新通知发送给感兴趣的监听者。无论监听窗口本身是否存储过数据，与执行存储操作的窗口同源的每个窗口的window对象上都会触发Web Storage事件。
像这样，添加事件监听器即可接收同源窗口的Storage事件：
window.addEventListener('storage', function(e) {
console.log(e.key, e.newValue, e.oldValue, e.url, e.storageArea);
}, true);
- key，键
- newValue，新值
- oldValue，旧值
- url，改变Storage的页面地址
- storageArea，指向发生改变的sessionStorage或localStorage。
经试验发现，该事件监听仅对localStorage有效。
对于sessionStorage，在一个页面创建，只能在该页面（A页面）可见，从该页面进入另一个同源页面（同一标签页，B页面），可以在B页面取到A页面的sessionStorage。以后，无论是A页面还是B页面对sessionStorage的修改都会对对方不可见。
