理解Cookie、Session、sessionStorage、localStorage

Cookie

cookie是存在浏览器上的一小段数据。用来记录某系页面关闭或者刷新后仍需要记录的信息。
cookie可以使用js在浏览器直接设置，也可以在服务器端使用HTTP协议规定的set-cookie来设置。
一般cookie的容量为4k左右。
document.cookie查看当前浏览网站的cookie

参数：

domain：域名。（domain和Path加起来构成URL，一起限制cookie能被哪些URl访问）
Path：cookie影响到的路径，匹配路径才可以发送cookie。
secure：当secure为true是，cookie在HTTP中无效，在HTTPS中有效。
httpOnly：浏览器不允许脚本操作document.cookie去修改cookie。（一般都设置为true，可以避免xss攻击拿到cookie）
Expires和Max-Age：cookie什么时间内有效。过期时间（Expires）和有效期（Max-Age）。

情况1：不设置Expires和Max-Age会发生什么？

浏览器会在你关闭页面的时候自动清除cookie。

情况2：同时设置Expires和Max-Age会发生什么？

所有支持Max-Age的浏览器会忽略Expires的值。只有IE会忽略Max-Age支持Expires。

情况3：只设置Max-Age会怎样？

除了IE之外的所有浏览器会正确的使用它，在IE中，这个Cookie将会作为一个Session Cookie（当你关闭浏览器时它会被删除）

情况4：只设置Expires会怎样？

所有浏览器会正确的使用它保存Cookie。

Cookie干嘛用的？

1、会话状态管理（如用户登录状态、购物车、游戏分数、其它需要记录的信息）

2、个性化设置（如用户自定义设置、主题等）

3、精准广告。（平常浏览网页时有时会推出商品刚好是你最近浏览过，买过的类似东西，这些是通过cookie记录的。）

Session

session机制是一种服务器端的机制。

创建session后，会把关联的session_id通过setCookie添加到http响应头部中。
浏览器在加载页面时发现响应头有set-cookie字段，就把这个cookie种到浏览器指定的域名下。
当下次刷新页面时，发送的请求会带上这条cookie，服务器在接受到后根据session_idl来识别用户。

注意：
cookie是存储在浏览的数据
session是让服务器是被某个用户的机制。
session实现的过程中需要使用到cookie
session保存信息的手段是多种的：缓存，数据库，文件等；默认是文件形式保存

sessionStorage

sessionStorage是用于本地存储的一个会话(session)中的数据。这些数据只有在同一个会话的页面中才能访问且当会话结束后数据也会随之销毁。

语法：

sessionStorage.setItem('key', 'value'); //保存数据到sessionStorag（添加）

sessionStorage.getItem('key'); //获取key的value值

sessionStorage.removeItem('key'); //删除key已经value值

sessionStorage.clear(); //删除所有key和value
sessionStorage.length; //sessionStorage的项目数

注意：sessionStorage与localStorage一样，都可用setItem、getItem、removeItem、clear、length。

loctlStorage

1、loctlStorage HTML5本地存储web storage特性的API之一，用于大量数据保存在浏览器中，数据永远不会失效，除非用js手动清除。
2、不参与网络传输。
3、一般用于性能优化，可以保存图片、js、css、html模板、大量数据。

5、语法跟sessionStorage一样。

总结：

1、Session 在服务器端，Cookie在客户端（浏览器）

2、Session默认被存在服务器的一个文件里（不是内存）

3、Session的运行依赖session_id，而session_id是存在Cookie中的，也就说浏览器禁用了Cookie，同时Session也会失效（但可以通过其它方式实现，如：url中传递session_id）

4、Session可以放在文件、数据库、内存中都可以。

5、无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

特性	Cookie	loctStorage	sessionStorage
生命期	可设置失效时间	除非清除，否则永久有效	仅在当前会话下有效，关闭页面或浏览器后被清除
大小	4KB左右	一般5MB	一般5MB
与服务器通信	每次都会携带HTTP头中	仅在浏览器中保存，不参与和服务器通信	仅在浏览器中保存，不参与和服务器通信

参考：

https://www.zhihu.com/question/19786827
https://segmentfault.com/a/1190000011397777
https://segmentfault.com/a/1190000006156098
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
http://jerryzou.com/posts/cookie-and-web-storage/