咦？localStorage 还可以这么用！
|
zhenglin
2026年1月10日 10:8
本文热度 427
|
开发web的同事基本上都离不开一种存储方式localStorage，localStorage 是浏览器提供的 本地持久化存储 机制，允许开发者以键值对形式在客户端存储数据，数据不会因页面刷新或浏览器关闭而丢失。
下面是其核心用法和注意事项：
一、核心方法
存储数据 • setItem(key, value)
存储键值对，键和值均为字符串。若键已存在，则覆盖原值。
localStorage.setItem("username", "Alice");
// 存储对象需序列化
const user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
可通过属性形式存储（等效于 setItem）：
localStorage.username = "Alice";
读取数据 • getItem(key)
通过键获取值，若键不存在则返回 null。
const username = localStorage.getItem("username"); // "Alice"
• 直接访问属性
const user = JSON.parse(localStorage.user); // 反序列化对象
删除数据 • removeItem(key)
删除指定键值对：
代码高亮：
localStorage.removeItem("username");
• clear()
清空所有本地存储数据：
其他操作 • key(index)
通过索引获取键名：
const firstKey = localStorage.key(0);
• length
获取存储的键值对数量：
const count = localStorage.length;
二、数据类型处理
• 仅支持字符串
所有数据需以字符串形式存储。处理对象或数组时需转换：
// 存储对象
localStorage.setItem("user", JSON.stringify({ name: "Alice" }));
// 读取对象
const user = JSON.parse(localStorage.getItem("user"));
三、注意事项
同源策略
仅同源（相同协议、域名、端口）的页面可共享数据。
容量限制
通常为 5MB（不同浏览器可能略有差异），超出会抛出异常。
安全性
• 避免存储敏感信息（如密码、令牌），因数据可被 JavaScript 直接读取。
• 防范 XSS 攻击，确保页面无恶意脚本注入风险。
兼容性
现代浏览器均支持，但需检测环境：
if (typeof(Storage) !== "undefined") {
// 支持 localStorage
}
四、常见应用场景
用户偏好设置
保存主题、语言等配置：
localStorage.setItem("theme", "dark");
2.购物车信息
持久化存储商品列表：
const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push(newItem);
localStorage.setItem("cart", JSON.stringify(cart));
3.表单自动保存
防止用户输入意外丢失：
document.querySelector("input").addEventListener("input", (e) => {
localStorage.setItem("formData", JSON.stringify(e.target.value));
});
4.登录状态保持
存储用户登录凭证（需加密）：
localStorage.setItem("token", "encrypted_token");
五、与其他存储的区别
六、进阶技巧
• 监听数据变化
通过 storage 事件监听其他窗口的修改：
window.addEventListener("storage", (e) => {
if (e.key === "theme") {
applyTheme(e.newValue);
}
});
模拟过期时间
手动添加时间戳字段：
// 存储时
localStorage.setItem("data", JSON.stringify({ value: "test", expire: Date.now() + 3600000 }));
// 读取时
const data = JSON.parse(localStorage.getItem("data"));
if (data.expire < Date.now()) {
localStorage.removeItem("data");
}
通过合理使用 localStorage，可以显著提升 Web 应用的用户体验，但需注意数据安全和存储效率。对于复杂场景（如大量数据存储），可结合 IndexedDB 等方案。
参考文章：原文链接
该文章在 2026/1/10 12:15:10 编辑过
400 186 1886
