Cookie Session localStorage

Cookie

1. 是什么？
   • Cookie是服务器保存在浏览器的一小段文本信息，每个Cookie的大小一般不超过4KB。
   • Cookie主要用来分辨两个请求是否来自同一浏览器，以及用来保存一下状态信息。
2. 常用场合

• 对话管理：保存登陆、购物车等需要记录的信息。
• 个性化：保存用户的偏好
• 追踪：记录和分析用户的行为

3. 特点
   1. 服务器通过Set-Cookie响应头设置Cookie
   2. 浏览器得到Cookie之后，每次请求都会带上Cookie
   3. 服务器读取Cookie就知道登陆用户的信息
4. Cookie包含的信息
   • Cookie的名字
   • Cookie的值（用于写真实数据）
   • 到期时间
   • 所属域名（默认是当前域名）
   • 生效的路径（默认是当前网址）
5. 创建Cookie
   当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后，保存这个Cookie。

Set-Cookie: =

---

Session

一种持久网络协议，在用户端和服务端之间创建关联，从而起交换数据包的作用机制。

session的实质是存储于服务器里的一小块内存。
服务器通过Cookie给用户一个sessionID，然后sessionID对应服务器的一小块内存，
每次用户访问服务器时，服务器通过sessionID读取session，得知用户的隐私信息。

session是基于Cookie实现的。

/* 服务器端 */
/* 1. 当第一次使用session时，服务器创建一个sessionId
*  此Id作为session中存放用户信息的唯一标识
*/
let session = {}
let sessionId = Math.random().toString.slice(2)
session[sessionId] = userinfo
/* 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: sessionId   //sessionId指的是内容
...

/* 服务器端 */
/* 4. 服务器收到Cookie中的sessionId，
* 然后读取相应的session的对应内存，最后得到用户信息。
*/
if (requeset.headers.cookie){
  let sessionId = request.headers.cookie
  let userInfo = session[sessionId]
}

---

localStorage

HTML5新增的API，只能存字符串，遵循同源策略，属于本地存储。

可以操作当前页面的哈希表

localStorage.getItem('a');
localStorage.setItem('a','1')
localStorage.setItem('jsonString',JSON.stringify({name:'obj'}) //利用JSON存对象
localStorage.clear()

特点

1. localStorage 跟HTTP无关
2. HTTP 不会带上 localStorage 的值
3. 只有相同域名的页面才能互相读取 localStorage (没有同源这么严格)
4. 每个域名 localStorage 的最大存储量为 5Mb 左右（每个浏览器不一样）
5. 常用场景：记录有没有提示过用户（不敏感的信息，反正不能记录密码）
6. localStorage永久有效，除非用户清理缓存

---

SessionStorage

1. SessionStorage在用户关闭页面后就失效
2. API与localStorage 一样

---

来说说他们之间的区别

Cookie和LocalStorage

1. Cookie大小一般为4KB；localStorage一般为5MB；
2. Cookie一般在浏览器关闭（会话结束）时就失效，后端可以设置Expires或Max-Age来改变Cookie的过期时间；LocalStorage是永久有效，除非用户手动清除；
3. Cookie会被附加到HTTP请求中，而LocalStorage不会。

---

localStorage 与 sessionStorage 的区别

localStorage永久有效， sessionStorage在用户关闭页面（会话结束）后失效。

---

Cookie 和 Session

1. Cookie保存在用户的硬盘里，而Session是对应服务器中的一小块内存
2. Cookie每次都会随着HTTP请求发送给服务器；而Session只需要发送保存在Cookie的SessionID即可从那个服务器中读取对应的内容
3. Cookie以明文的形式存储，内容可被查看或篡改；Session只提供一个随机的SessionID，所以无法直接查看。