Web 存储
- 以 key-value 的形式存储在浏览器中
- key-value 的 key 和 value 都只能是 [字符串]，对于 [数字] value，存储时会自动将其转换为 [字符串]
sessionStorage
- 默认情况下，关闭当前页面就会被销毁
- 在浏览器中，可通过
sessionStorage操作 sessionStorage - 如果读取的 key 不存在，读取到的 value 会为
null；JSON.parse(null)返回null
console.log(sessionStorage); // 打印 sessionStorage 对象
sessionStorage.setItem("name", "superman"); // 存数据
const name = sessionStorage.getItem("name"); // 取数据
sessionStorage.removeItem("name"); // 删除数据
sessionStorage.clear(); // 清空数据
localStorage
- 默认情况下，永远不会被销毁
- 在浏览器中，可通过
localStorage操作 localStorage - 如果读取的 key 不存在，读取到的 value 会为
null；JSON.parse(null)返回null
console.log(localStorage); // 打印 localStorage 对象
localStorage.setItem("name", "superman"); // 存数据
const name = localStorage.getItem("name"); // 取数据
localStorage.removeItem("key"); // 删除数据
localStorage.clear(); // 清空数据
- localStorage 是同步机制，会影响浏览器渲染进度
- localStorage 可以用来设置搜索记录
cookie
- cookie 以 key-value 的形式存储在浏览器中
- 默认情况下，即关闭浏览器就会被销毁
- key-value 的 key 和 value 都只能是 [字符串]。对于 [数字] value，存储时会自动将其转换为 [字符串]
- 可配置一些用于控制 cookie 有效期、安全性、适用范围… 的可选属性
- 浏览器发起请求时，会自动把当前域名下所有未过期的 cookie 一同发送到服务器
- cookie 不能存储过多数据，否则会影响交互性能。一般小于 4KB
- cookie 相对不安全
浏览器操作 cookie
- 在浏览器中，可通过
document.cookie操作 cookie
document.cookie = "name=superman"; // 存数据
console.log(document.cookie); // 获取所有 cookie
- 可以在操作 cookie 的时候配置 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 后失效
服务器操作 cookie
- 在服务器 (node.js) 中，可通过插件 cookie-parser 操作 cookie
npm i cookie-parser- 引入、注册中间件 cookie-parser
const cookieParser = require("cookie-parser");
app.use(cookieParser());
可通过配置对象 options 设置 cookie 的字段：
domain：String；cookie 生效的域名。默认为应用程序的域名path：String；cookie 生效的路由路径。默认为/expires：Date；cookie 的失效日期。如果未指定或设置为0，则创建会话 cookiemaxAge：Number；相对于当前时间设置失效时间，以毫秒为单位secure：Boolean；将 cookie 标记为仅用于 HTTPSencode：Function；为 cookie 值编码的同步函数。默认为 encodeURLComponenthttpOnly：Boolean；将 cookie 标记为仅可由 web 服务器访问，前端不可访问；默认为falsesigned：Boolean；指示是否应该对 cookie 进行签名
const express = require("express");
const app = express();
app.listen(8080, () => console.log("http://127.0.0.1:8080"));
app.use(express.static(__dirname + "/public"));
// 引入、注册 cookie-parser
const cookieParser = require("cookie-parser");
app.use(cookieParser());
app.get("/setCookie", (req, res) => {
// 设置 cookie
res.cookie("name", "superman", {
maxAge: 10000,
});
res.send("setCookie");
});
app.get("/getCookie", (req, res) => {
// 获取 cookie
console.log("cookies", req.cookies); // cookies { name: 'superman' }
res.send("getCookie");
});
<body>
<button id="but1">设置cookie</button>
<button id="but2">获取cookie</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 设置 cookie
but1.onclick = async () => {
let res = await axios({
url: "/setCookie",
});
console.log("data", res.data); // data setCookie
};
// 获取 cookie
but2.onclick = async () => {
let res = await axios({
url: "/getCookie",
});
console.log("data", res.data); // data getCookie
};
</script>
cookie 的工作流程
浏览器第 1 次请求服务器时，服务器向客户端返回一个用于身份认证的 cookie，浏览器会将该 cookie 保存在浏览器中
随后，当浏览器请求服务器时，浏览器会自动将当前域名下所有未过期的 cookie (当然也就包括身份认证相关的 cookie) 以 [请求头] 的形式发送给服务器，服务器即可验证用于身份
cookie & Storage
存储大小
- cookie：一般不超过 4k；浏览器一般会限制一个站点最多保存 20 个 cookie
- sessionStorage：大约 5M
- localStorage：大约 10M
- 不同浏览器可能不同
数据有效期
- cookie：cookie 的有效期一般由服务器生成。默认情况下，关闭浏览器 则失效
可以设置失效时间，如果设置了失效时间，cookie 就会存储在硬盘中，过期 则失效 - sessionStorage：关闭页面 则失效
- localStorage：永久有效，除非手动删除
作用域
- cookie：在同源窗口中共享
- sessionStorage：仅在当前窗口可用
- localStorage：在同源窗口中共享
- 同源：协议、域名、端口号都一样；不一样则为跨域
通信
- cookie：能在浏览器和服务器之间来回传递（所以 cookie 不宜保存过多数据，会影响性能）
- sessionStorage：不参与通信
- localStorage：不参与通信