HTML5 Web Storage 完整教程

Web Storage 是 HTML5 提供的客户端存储解决方案，比 Cookie 更大、更安全。

localStorage vs sessionStorage

localStorage - 长期存储，关闭浏览器后仍存在
sessionStorage - 会话级存储，关闭标签页后清除

存储容量：通常 5-10MB

localStorage 基本操作

localStorage 用法

// 存储数据
localStorage.setItem("username", "张三");

// 读取数据
var name = localStorage.getItem("username");

// 删除数据
localStorage.removeItem("username");

// 清空所有
localStorage.clear();

存储对象

JSON 存储

// 存储对象
var user = { name: "张三", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

// 读取对象
var user = JSON.parse(localStorage.getItem("user"));

实战应用

主题切换

主题保存

// 保存主题
localStorage.setItem("theme", "dark");

// 恢复主题
var theme = localStorage.getItem("theme");
if (theme) document.body.className = theme + "-theme";

表单自动保存

表单暂存

// 输入时自动保存
form.addEventListener("input", function() {
    localStorage.setItem("formDraft", form.value);
});

// 页面加载时恢复
form.value = localStorage.getItem("formDraft") || "";

// 提交成功后清除
form.addEventListener("submit", () => {
    localStorage.removeItem("formDraft");
});

常见问题

存储容量多大？

大多数浏览器限制为 5-10MB。

安全注意事项？

不要在 Web Storage 中存储敏感信息，XSS 攻击可以读取数据。

💻 在线代码编辑器

👁️ 预览效果