一、Cookie
1、Cookie 是一段由服务器发送给浏览器并保存到本地的一段数据（缓存），大小一般为 4KB 。
2、它存储着用户的一些信息，在浏览器再次访问同一个 URL 时会将这段 Cookie 附加到 HTTP 请求中发送给服务器。因此，这会增加流量的消耗。
3、一般在浏览器关闭（会话结束）时就被删除，但也可以通过 Expire或 Max-Age来设置过期时间。
4、浏览器可以通过 document. cookie读写 Cookie ，若要阻止此行为，可以在 Set-Cookie头中添加 HttpOnly标记。
二、Session
Session 的实质是存储在服务器里的一小块内存，一般来说是基于 Cookie 实现的。实现过程举例如下：
/* 服务器端 */
/* 1. 当第一次使用 Session 时，服务器要创建一个 【SessionID】
* 来作为 Session 中存放用户信息的唯一标识
*/
let session = {}
let sessionID = Math.random().toString().slice(2)// 假设为 '1234567890'
session[sessionID] = 用户信息
/* 2. 服务器通过 Cookie 给用户返回一个 SessionID */
response.setHeader('Set-Cookie',sessionID)
/* 客户端发送的请求 */
/* 3. 当用户访问同一个 URL 时，向服务器发送这个内容为其 SessionID 的 Cookie 头 */
Request Header
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length:580
Cookie:1234567890
...
/* 服务器端 */
/* 4. 服务器读取 Cookie 中的 SessionID ，
* 然后去 Session 中读取对应的内存，最终得到用户信息。
*/
if(request.headers.cookie){
let sessionID = request.headers.cookie
let userInfo = session[sessionID]
// 读取用户信息
}
需要注意的是， SessionID 是随机生成的。
三、LocalStorage
window.localStorage 是 HTML5 新增的一个 API ，它遵循同源政策，属于本地存储。它有以下特点：
1、大小一般为 5MB ，永久有效；
2、本地存储和读取，不会被附加到 HTTP 请求中。
window.localStorage的使用如下例所示：
// 保存数据到 LocalStorage
localStorage.setItem('key','value') // {"key": "value"}
// 从 LocalStorage 获取数据
let key = localStorage.getItem('key') // "value"
// 从 LocalStorage 删除保存的数据
localStorage.removeItem('key') // {}
// 从 LocalStorage 删除所有保存的数据
sessionStorage.clear();
四、SessionStorage
window.sessionStorage同样也遵循同源政策，它与 window.localStorage不同的是，它在页面或浏览器关闭（会话结束）时就会被清除。 window.sessionStorage的使用如下例所示：
// 保存数据到 SessionStorage
sessionStorage.setItem('key','value')
// 从 SessionStorage 获取数据
var data = sessionStorage.getItem('key')
// 从 SessionStorage 删除保存的数据
sessionStorage.removeItem('key')
// 从 SessionStorage 删除所有保存的数据
sessionStorage.clear()
总结
四者之间的比较如下：
Cookie Session
Cookie 保存在客户端的硬盘里，是浏览器缓存之一；而 Session 是保存在服务端的内存里，是一块内存。
Cookie 每次都随着 HTTP 请求发送给服务器；而 Session 只需要通过发送保存在 Cookie 头中的 SessionID 即可从服务器中读取对应内存。
Cookie 以明文的形式存储，内容可以被用户查看或篡改；而 Session 因为只提供一个随机的 SessionID ，所以无法被用户直接查看。
Cookie LocalStorage
Cookie 的大小一般为 4KB ；而 LocalStorage 一般为 5MB 。
Cookie 一般在浏览器关闭（会话结束）时就失效，后端可以设置 Expires 或 Max-Age 来改变 Cookie 的过期时间；而 LocalStorage 是永久有效，除非用户手动清除。
Cookie 会被附加到 HTTP 请求中；而 LocalStorage 不会。
LocalStorage SessionStorage
前者永久有效，除非用户删除；后者在浏览器关闭（会话结束）后就被清空。
