咦？localStorage 还可以这么玩！

开发web的同事基本上都离不开一种存储方式localStrage,localStorage 是浏览器提供的 本地持久化存储 机制，允许开发者以键值对形式在客户端存储数据，数据不会因页面刷新或浏览器关闭而丢失。下面是其核心用法和注意事项：

---

一、核心方法

1. 存储数据 • setItem(key, value)

存储键值对，键和值均为字符串。若键已存在，则覆盖原值。

localStorage.setItem("username", "Alice");
// 存储对象需序列化
const user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

• 直接赋值

可通过属性形式存储（等效于 setItem）：

localStorage.username = "Alice";

2. 读取数据 • getItem(key)

通过键获取值，若键不存在则返回 null。

const username = localStorage.getItem("username"); // "Alice"

• 直接访问属性

const user = JSON.parse(localStorage.user); // 反序列化对象

3. 删除数据 • removeItem(key)

删除指定键值对：

localStorage.removeItem("username");

• clear()

清空所有本地存储数据：

localStorage.clear();

4. 其他操作 • 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"));

---

三、注意事项

1. 同源策略

   仅同源（相同协议、域名、端口）的页面可共享数据。

2. 容量限制

   通常为 5MB（不同浏览器可能略有差异），超出会抛出异常。

3. 安全性

   • 避免存储敏感信息（如密码、令牌），因数据可被 JavaScript 直接读取。

   • 防范 XSS 攻击，确保页面无恶意脚本注入风险。

4. 兼容性

   现代浏览器均支持，但需检测环境：

   if (typeof(Storage) !== "undefined") {
     // 支持 localStorage
   }

---

四、常见应用场景

1. 用户偏好设置

   保存主题、语言等配置：

   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");

---

五、与其他存储的区别

特性	localStorage	sessionStorage	Cookie
生命周期	永久存储	会话结束即消失	可设置过期时间
数据共享范围	同源所有窗口	仅当前窗口	跨域可共享（需设置）
容量限制	约5MB	约5MB	通常4KB
传输到服务器	否	否	是（每次请求携带）

---

六、进阶技巧

• 监听数据变化

通过 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 等方案。