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 的数据仅在当前浏览器标签页生命周期内有效，关闭标签页即自动清除，适用于临时表单草稿、导航状态等场景。
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应用【指南】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604134.html
微信扫一扫 
支付宝扫一扫 
