| 特性 | localStorage | sessionStorage | Cookie | Session |
|---|---|---|---|---|
| 存储位置 | 浏览器本地 | 浏览器本地 | 浏览器本地 | 服务器 |
| 数据传输 | 不自动发送 | 不自动发送 | 自动发送 | ID自动发送 |
| 存储类型 | 键值对 | 键值对 | 文本 | 多种类型（任意） |
| 存储大小 | 通常约5MB | 通常约5MB | 通常≤4KB | 无硬性限制 |
| 生命周期 | 持久化存储 | 关闭窗口/标签页后清除 | 可设置有效期 | 依赖服务器配置 |
| 跨窗口共享 | 同源窗口间共享 | 不跨窗口共享 | 同源窗口间共享 | 根据ID共享 |
| 安全性 | 较低（易被用户访问） | 较低（易被用户访问） | 中等（可加密） | 较高（服务器端） |
一、localStorage
常用场景：
需要持久化存储的数据。例如用户的一些主体、字体设置，登录的token，访问的历史记录，需要离线缓存的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 存储数据到sessionStorage
sessionStorage.setItem("键名", "存储的值");
// 获取sessionStorage中的数据
let sessionMessage = sessionStorage.getItem("键名");
console.log(sessionMessage); //存储的值
//存储对象需要转换为字符串
let message = {
name: "张三",
age: 18,
};
sessionStorage.setItem("message", JSON.stringify(message));
//取出对象
let obj = JSON.parse(sessionStorage.getItem("message"));
// 删除sessionStorage中的特定数据
sessionStorage.removeItem("message");
// 清空所有sessionStorage数据
sessionStorage.clear();
</script>
</body>
</html>
二、sessionStorage
常用场景：
只有当前会话需要使用的数据。例如一个按钮的点击次数。
<script>
// 存储数据到sessionStorage
sessionStorage.setItem("键名", "存储的值");
// 获取sessionStorage中的数据
let sessionMessage = sessionStorage.getItem("键名");
console.log(sessionMessage); //存储的值
// 存储对象到sessionStorage
let message = {
name: "张三",
age: 18,
};
sessionStorage.setItem("message", JSON.stringify(message));
// 获取sessionStorage中的对象
let newSessionMessage = JSON.parse(sessionStorage.getItem("message"));
// 删除sessionStorage中的特定数据
sessionStorage.removeItem("message");
// 清空所有sessionStorage数据
sessionStorage.clear();
</script>三、cookie
Cookie 的常用场景：
-
保存用户登录状态：当用户成功登录后，服务器可以设置一个包含用户ID或其他身份验证信息的cookie。下次用户访问同一网站时，浏览器会自动携带这个cookie，服务器通过读取cookie就能识别用户已登录，从而避免用户反复输入账号密码。
-
持久化用户设置
-
跟踪用户行为：网站分析工具可以利用cookie记录用户的访问路径、停留时间等信息，以便优化网站设计和营销策略。
-
搜索引擎和广告定向:搜索引擎和在线广告服务可能会使用cookie追踪用户的搜索历史和兴趣点，以此来提供个性化的搜索结果或展示相关广告。
Cookie的注意事项：
-
输出控制：设置cookie前不能有任何HTTP响应头部之外的数据输出，包括HTML、空白字符等，否则可能导致cookie设置失败。
-
初始化与获取：设置cookie后，在当前页面刷新前，
$_COOKIE数组可能不会立即更新，需要在新的页面请求中才能获取到新设置的cookie值。 -
大小和数量限制：单个cookie大小通常限制在4KB左右，并且单个域下的cookie总数量有限制，一般为300个左右，各个浏览器的具体限制可能不同。
-
特殊字符限制：Cookie的键名和值应避免使用分号(
;)、逗号(,)、等号(=)以及空格等特殊字符，因为它们在cookie格式中有特殊含义。 -
安全性：因为cookie存储在客户端，敏感信息（如密码）不应明文存储在cookie中。如果需要存储敏感信息，应加密处理，并结合HTTPS等安全协议传输。
-
有效期：应合理设置cookie的失效时间（Expires/Max-Age），以确保用户隐私和数据有效性。
-
跨域问题：cookie遵循同源策略，不能跨域名共享，除非设置了正确的domain属性。
-
用户设置：用户可以自行禁用浏览器的cookie功能，或者设置隐私模式阻止cookie的存储，开发者应考虑到这一情况并提供备选方案。
-
隐私保护：根据GDPR等法规要求，网站在使用cookie时需告知用户并获得用户同意，特别是涉及个人数据处理的情况。
<script>
// 设置一个名为 "username"，值为 "老王" 的Cookie，有效期为7天
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 使用函数创建Cookie
setCookie("username", "老王", 7);
// 读取Cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length, c.length);
}
return null;
}
// 使用函数读取Cookie
var username = getCookie("username");
console.log(username); // 老王
// 删除Cookie
function eraseCookie(name) {
setCookie(name, "", -1); // 将过期时间设置为过去
}
// 使用函数删除Cookie
eraseCookie("username");
</script>