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

标签： javascript java html js 前端 cookie 浏览器 session ai win 作用域 持久化