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

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

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

Cookie 是由服务器通过 Set-Cookie 响应头写入，也可由 J*aScript 在客户端直接设置，但需注意其大小限制（通常 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 的数据仅在当前浏览器标签页生命周期内有效，关闭标签页即自动清除，适用于临时表单草稿、导航状态等场景。

拾贝

一键同步微信读书所有笔记和划线，并在新标签页回顾

186 查看详情

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 的注意事项

直接通过 J*aScript 操作 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应用【指南】的详细内容，更多请关注其它相关文章！

# javascript  # java  # html  # js  # 前端  # cookie  # 浏览器  # session  # ai  # win  # 作用域  # 持久化  # 拾贝  # 两种  # 适用于  # 键值  # 客户端  # 上传  # 如果您  # 模态  # 如何在  # 是由  # 大学论文网站建设  # 灵通网站建设推广策略研究  # 泰州网站优化设计公司  # 南昌seo优化分析  # 渭南网站建设流程有哪些  # 直销网站建设方案  # 长岭seo网站推广  # 内江市营销短视频推广平台  # 如何将网站推广比较好  # 建设工程价格查询网站