【Node】cookie、sessionStorage、localStorage 与 身份认证

浏览器存储存储

• 以 key-value 的形式存储在浏览器中
• key-value 的 key 和 value 都只能是 [字符串]，对于 [数字] value，存储时会自动将其转换为 [字符串]
• 如果读取的 key 不存在，读取到的 value 会为 null；JSON.parse(null) 返回 null

sessionStorage

• 在浏览器中，可通过 sessionStorage 操作 sessionStorage
• 关闭当前页面就会被销毁

console.log(sessionStorage); // 打印 sessionStorage 对象
sessionStorage.setItem("name", "superman"); // 存数据
const name = sessionStorage.getItem("name"); // 取数据
sessionStorage.removeItem("name"); // 删除数据
sessionStorage.clear(); // 清空数据
1
2
3
4
5

localStorage

• 在浏览器中，可通过 localStorage 操作 localStorage
• 永远不会被销毁

console.log(localStorage); // 打印 localStorage 对象
localStorage.setItem("name", "superman"); // 存数据
const name = localStorage.getItem("name"); // 取数据
localStorage.removeItem("key"); // 删除数据
localStorage.clear(); // 清空数据
1
2
3
4
5

• localStorage 是同步机制，会影响浏览器渲染进度
• localStorage 可以用来设置搜索记录

cookie

1. cookie 以 key-value 的形式存储在浏览器中
2. key-value 的 key 和 value 都只能是 [字符串]。对于 [数字] value，存储时会自动将其转换为 [字符串]

document.cookie

• 在浏览器中，可通过 document.cookie 操作 cookie
• 默认情况下，即关闭浏览器就会被销毁

document.cookie = "name=superman"; // 存数据
console.log(document.cookie); // 获取所有 cookie
1
2

• 可配置一些用于控制 cookie 有效期、安全性、适用范围… 的可选属性
  ① domain：cookie 生效的域名
  ② path：cookie 生效的路由路径
  ③ expires / max-age：cookie 的有效期；默认为 session，即关闭浏览器就销毁
  expires 为指定时间，从 1970-1-1-0-0-0 开始算；max-age 为相对时间

document.cookie = "age=18; max-age=30"; // 30s 后失效
1

• 浏览器发起请求时，会自动把当前域名下所有未过期的 cookie 一同发送到服务器

cookie & Storage

存储大小

1. cookie：一般不超过 4k；浏览器一般会限制一个站点最多保存 20 个 cookie
2. sessionStorage：大约 5M
3. localStorage：大约 10M

• 不同浏览器可能不同

数据有效期

1. cookie：默认情况下，关闭浏览器则失效；可以设置失效时间
2. sessionStorage：关闭页面则失效
3. localStorage：永久有效

作用域

1. cookie：在同源窗口中共享
2. sessionStorage：仅在当前窗口可用；
   但是在某些特定场景下新开的页面会复制之前页面的 sessionStorage，比如使用 a 标签或 window.open 新开页面
3. localStorage：在同源窗口中共享

• 同源：协议、域名、端口号都一样；不一样则为跨域

通信

1. cookie：能在浏览器和服务器之间来回传递
2. sessionStorage：不参与通信
3. localStorage：不参与通信