咦？localStorage 还可以这么玩！

五号厂房
67 阅读3分钟

开发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";
  1. 读取数据 • getItem(key)

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

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

• 直接访问属性

const user = JSON.parse(localStorage.user); // 反序列化对象
  1. 删除数据 • removeItem(key)

删除指定键值对：

localStorage.removeItem("username");

• clear()

清空所有本地存储数据：

localStorage.clear();
  1. 其他操作 • 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");

五、与其他存储的区别

特性localStoragesessionStorageCookie
生命周期永久存储会话结束即消失可设置过期时间
数据共享范围同源所有窗口仅当前窗口跨域可共享（需设置）
容量限制约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 等方案。

avatar
文章
阅读
粉丝