特性 | 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>