HTML如何操作本地存储_Cookie与WebAPI应用【指南】

Cookie和Web Storage（localStorage、sessionStorage）是浏览器中保存用户数据的两种机制，分别适用于有有效期限制、持久化存储和会话级临时存储场景，且在生命周期、作用域及安全性上各具特点。

如果您希望在网页中保存用户偏好、登录状态等少量数据，浏览器提供了 Cookie 和 Web Storage（localStorage 与 sessionStorage）两种主流机制。它们在生命周期、作用域和操作方式上存在显著差异。以下是针对 HTML 环境下操作本地存储的实用方法：

一、使用 document.cookie 设置与读取 Cookie

Cookie 是由服务器通过 Set-Cookie 响应头写入，也可由 JavaScript 在客户端直接设置，但需注意其大小限制（通常 4KB）、作用域约束及默认不支持 HTTP-only 标志的客户端写入特性。

1、设置一个有效期为 7 天的 Cookie：
document.cookie = "username=JohnDoe; expires=" + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";

2、读取所有 Cookie 字符串：
const allCookies = document.cookie;

立即学习“前端免费学习笔记（深入）”；

3、解析指定 Cookie 名称的值（需手动分割）：
const cookies = document.cookie.split("; ").reduce((acc, pair) => { const [key, value] = pair.split("="); acc[key] = decodeURIComponent(value); return acc; }, {});
const username = cookies.username;

二、使用 localStorage 持久化保存键值对

localStorage 提供无过期时间的本地键值存储，数据在关闭浏览器后仍保留，且仅限同源页面访问，容量通常为 5–10MB。

1、保存字符串数据：
localStorage.setItem("theme", "dark");

2、读取已保存的值：
const currentTheme = localStorage.getItem("theme");

3、删除特定键：
localStorage.removeItem("theme");

4、清空全部数据：
localStorage.clear();

三、使用 sessionStorage 保存会话级数据

sessionStorage 的数据仅在当前浏览器标签页生命周期内有效，关闭标签页即自动清除，适用于临时表单草稿、导航状态等场景。

Health AI健康云开放平台

专注于健康医疗垂直领域的AI技术开放平台

113

查看详情

1、写入会话数据：
sessionStorage.setItem("draftContent", "未完成的编辑内容");

2、读取会话数据：
const draft = sessionStorage.getItem("draftContent");

3、检查某键是否存在：
if (sessionStorage.key(0) !== null) { /* 至少有一个键 */ }

四、监听 storage 事件实现跨标签页通信

当同一源下的其他窗口或标签页修改 localStorage 或 sessionStorage 时，当前页面可通过 window.addEventListener("storage") 接收变更通知，但注意：触发事件的页面自身不会收到该事件。

1、添加 storage 监听器：
window.addEventListener("storage", (event) => { console.log("键名：" + event.key); console.log("旧值：" + event.oldValue); console.log("新值：" + event.newValue); console.log("来源页面 URL：" + event.url); });

2、确保事件监听在页面加载后立即注册：
document.addEventListener("DOMContentLoaded", () => { window.addEventListener("storage", handleStorageChange); });

五、安全操作 Cookie 的注意事项

直接通过 JavaScript 操作 Cookie 存在 XSS 风险，尤其当 Cookie 包含敏感信息时。应避免设置 document.cookie = "auth_token=xxx" 类型的明文凭证；若必须使用，应配合 HttpOnly=false 显式声明，并确保服务端始终校验签名与时效性。

1、禁止将密码、JWT 全量令牌存入可被 JS 访问的 Cookie：
应优先使用 HttpOnly Cookie 传输认证凭据，前端仅通过 API 调用间接使用。

2、设置 Secure 标志防止非 HTTPS 传输：
document.cookie = "session_id=abc123; Secure; SameSite=Lax";

3、限制作用域以减少泄露面：
document.cookie = "cart_items=[1,2,3]; path=/shop; domain=example.com";

以上就是HTML如何操作本地存储_Cookie与WebAPI应用【指南】的详细内容，更多请关注php中文网其它相关文章！