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 服务器访问,前端不可访问;默认为false
signed
: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:不参与通信