html 本地存储localStorage

2026-04-30 00:00:27 529阅读 0评论

别让刷新清空一切：LocalStorage 实战避坑指南

你有没有过这样的经历：辛辛苦苦调暗了屏幕亮度，切换到了夜间模式，结果不小心刷新了一下页面，所有设置瞬间回原形。这种糟糕的用户体验，通常是因为前端忽略了数据的持久化保存。而 localStorage 就是那个默默在后台替你“记得”一切的救星，但用不好它也很容易翻车。

不仅仅是存取键值对

很多人对 localStorage 的理解停留在 setItem 和 getItem 上。这没错，但它有一个隐形的特性：它只能存字符串。如果你直接存入一个对象或数组，结果会令你失望。

// ❌ 错误示范：存入对象会被转成 "[object Object]"
const config = { theme: 'dark', lang: 'zh' };
localStorage.setItem('userConfig', config); 
console.log(localStorage.getItem('userConfig')); // [object Object]

// ✅ 正确姿势：序列化存储
localStorage.setItem('userConfig', JSON.stringify(config));
// 取出时别忘了反序列化
const storedConfig = JSON.parse(localStorage.getItem('userConfig'));

这一点看似简单，却是新手最容易踩的坑。一旦忘记处理 JSON，取出来的数据就彻底废了。

容量与性能的边界感

浏览器给每个域名分配了大约 5MB 的空间。这听起来很大，装几个配置项绰绰有余。但如果你试图用它来缓存大量日志，或者存放 Base64 编码的图片，很快就会被填满。更关键的是，localStorage 的操作是同步阻塞的。

想象一下，如果在一个循环里高频写入大数据，主线程会被卡住，页面可能出现短暂的卡顿甚至无响应。所以，适合它的场景非常明确：用户偏好设置（如主题、字体大小）、表单草稿暂存、非敏感的小型状态记录。如果是海量数据，请转身去寻找 IndexedDB。

模拟过期时间：给数据加上“保质期”

原生 localStorage 没有“过期时间”这一说，数据一旦写入，除非手动清除，否则永远存在。这在某些场景下很麻烦，比如验证码缓存或者临时的会话令牌。这时候我们需要自己封装一层逻辑。

可以在存入数据时，顺便记录时间戳：

function setWithExpire(key, value, minutes) {
  const item = {
    value: value,
    expire: new Date().getTime() + minutes * 60 * 1000
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getWithExpire(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;

  const item = JSON.parse(itemStr);
  // 检查是否过期
  if (new Date().getTime() > item.expire) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

这个小函数解决了最头疼的版本兼容问题。当你的 APP 升级后，旧数据结构可能不再适用。加上版本号字段是另一个好习惯，读取时发现版本号不匹配，自动清除并重新初始化默认值，能有效避免用户打开新版应用却报错的情况。

安全防线不能忘

虽然 localStorage 存储在客户端，比 Cookie 更安全（不会被服务端自动发送），但它依然暴露在浏览器的环境中。如果你的网站存在 XSS 漏洞，攻击者可以轻易读取这里面的内容。绝对不要直接存储用户的密码、信用卡号等极度敏感信息。即便是 Token，也要权衡风险，优先使用 HttpOnly 的 Cookie 机制来承载认证凭证，将 localStorage 留给那些丢了也不心疼的配置数据。