📌 localStorage 相关 API 详解
localStorage 是浏览器提供的本地存储，适用于持久化数据，即使页面刷新或关闭浏览器，数据仍然存在。
🔹 1. 基本 API
📝 1.1 存储数据 (setItem)
localStorage.setItem("key", "value");
- 作用：存储一个键值对。
- 存储的数据必须是字符串，如果是对象或数组，需要
JSON.stringify()处理。
示例：
localStorage.setItem("username", "燕子");
localStorage.setItem("user", JSON.stringify({ name: "燕子", age: 25 }));
📖 1.2 读取数据 (getItem)
let value = localStorage.getItem("key");
- 作用：根据键获取值，如果键不存在，返回
null。
示例：
let username = localStorage.getItem("username");
console.log(username); // 燕子
let user = JSON.parse(localStorage.getItem("user"));
console.log(user.name); // 燕子
console.log(user.age); // 25
⚠ 注意：
- 存入对象时用
JSON.stringify()，取出时用JSON.parse()。 - 如果键不存在，返回
null，要防止JSON.parse(null)导致错误。
🗑 1.3 删除数据 (removeItem)
localStorage.removeItem("key");
- 作用：删除指定键的值。
示例：
localStorage.removeItem("username");
console.log(localStorage.getItem("username")); // null
🗑 1.4 清空所有数据 (clear)
localStorage.clear();
- 作用：删除
localStorage中的所有键值对（慎用！）。
示例：
localStorage.setItem("user", "燕子");
localStorage.setItem("token", "abc123");
localStorage.clear();
console.log(localStorage.getItem("user")); // null
console.log(localStorage.getItem("token")); // null
📌 1.5 获取 localStorage 长度 (length)
let count = localStorage.length;
console.log(count);
- 作用：获取
localStorage中存储的键值对数量。
🔑 1.6 根据索引获取键名 (key)
let keyName = localStorage.key(index);
- 作用：获取指定索引的键名。
示例：
localStorage.setItem("name", "燕子");
localStorage.setItem("age", "25");
console.log(localStorage.key(0)); // 可能是 "name" 或 "age"（顺序不固定）
console.log(localStorage.key(1)); // 可能是 "age" 或 "name"
📌 注意：浏览器不会保证存储顺序，所以索引顺序可能变化。
🔹 2. 常见应用场景
🔹 2.1 持久化存储用户信息
const user = { name: "燕子", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
// 读取
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // 燕子
🔹 2.2 记录用户主题偏好
// 存储主题
localStorage.setItem("theme", "dark");
// 读取并应用主题
document.body.classList.add(localStorage.getItem("theme"));
🔹 2.3 记录购物车信息
let cart = [{ id: 1, name: "手机" }, { id: 2, name: "电脑" }];
localStorage.setItem("cart", JSON.stringify(cart));
// 读取购物车
let storedCart = JSON.parse(localStorage.getItem("cart"));
console.log(storedCart);
🔹 2.4 监听 localStorage 变化
window.addEventListener("storage", (event) => {
console.log("存储变化:", event.key, event.oldValue, event.newValue);
});
📌 注意：这个事件 只会在 同一网站的不同标签页或窗口 中触发，单个页面内部修改 localStorage 不会触发。
⛔ localStorage 限制
- 容量限制：大约 5MB（不同浏览器可能有所不同）。
- 不能存储复杂数据：只能存字符串，需要
JSON.stringify()。 - 不能跨域访问：只能在同一域名（包括协议和端口）下访问。
- 不同
subdomain不共享：例如a.example.com和b.example.com不能共享localStorage。 - 无法自动过期：必须手动清除。
🔥 总结
| API | 作用 |
|---|---|
setItem(key, value) | 存储数据 |
getItem(key) | 读取数据 |
removeItem(key) | 删除单个数据 |
clear() | 清空所有数据 |
length | 获取存储的键值对数量 |
key(index) | 获取指定索引的键 |
localStorage 适用于 长期存储，但 不适合存储敏感信息（如密码、Token），更安全的方式是 sessionStorage 或 cookie。
💡 如果需要存储带过期时间的数据，可以考虑 sessionStorage 或手动实现过期逻辑！ 🚀
