实用技能
本地存储
掌握 localStorage、sessionStorage 的使用
本地存储
Web Storage API 让浏览器端存储数据变得极为简单。
学完本章你将： 掌握 localStorage、sessionStorage 的使用。
localStorage vs sessionStorage
javascript
// localStorage：永久存储（直到手动删除）
localStorage.setItem("theme", "dark");
let theme = localStorage.getItem("theme");
console.log(theme); // "dark"
// sessionStorage：标签页关闭后清除
sessionStorage.setItem("temp", "data");
let temp = sessionStorage.getItem("temp");
console.log(temp); // "data"| 特性 | localStorage | sessionStorage |
|---|---|---|
| 容量 | ~5-10MB | ~5-10MB |
| 生命周期 | 永久 | 标签页关闭 |
| 作用域 | 同源共享 | 同标签页 |
| 跨标签页 | ✅ | ❌ |
增删改查
javascript
// 增/改
localStorage.setItem("key", "value");
// 查
let value = localStorage.getItem("key");
// 删单个
localStorage.removeItem("key");
// 清空所有
localStorage.clear();
// 键的数量
console.log(localStorage.length);
// 迭代
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}存储对象
javascript
// localStorage 只能存储字符串，需要序列化
let user = { name: "Alice", age: 25, settings: { theme: "dark" } };
// 存储
localStorage.setItem("user", JSON.stringify(user));
// 读取
let stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name); // "Alice"
// 封装工具函数
const storage = {
set(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
get(key) {
try {
return JSON.parse(localStorage.getItem(key));
} catch {
return null;
}
},
remove(key) {
localStorage.removeItem(key);
},
};
storage.set("user", user);
console.log(storage.get("user").name); // "Alice"storage 事件
javascript
// 监听其他标签页的 storage 变化（同一标签页不会触发）
window.addEventListener("storage", (event) => {
console.log("键：", event.key);
console.log("旧值：", event.oldValue);
console.log("新值：", event.newValue);
console.log("URL：", event.url);
});
// 应用：多标签页通信
localStorage.setItem("sync", Date.now().toString());注意事项
| 注意 | 说明 |
|---|---|
| 同步 API | 大容量操作可能阻塞主线程 |
| 同源策略 | 协议+域名+端口完全相同才共享 |
| 隐私模式 | 部分浏览器限制 storage |
| 不存敏感信息 | 可被用户查看和修改 |