怎样使用LocalStorage存储数据_它有什么限制

夜晨 2025-12-26 00:00:00 次阅读

LocalStorage 是浏览器提供的同源字符串持久化存储，容量约5–10MB；需用 setItem/getItem/removeItem 操作，存对象须 JSON 序列化，不支持敏感信息、跨域及自动过期。

LocalStorage 是浏览器提供的一种简单持久化存储方式，适合存少量字符串数据，比如用户偏好、表单草稿、登录状态标识等。它不随页面刷新丢失，但仅限同源（相同协议、域名、端口）访问，且只能存字符串。

如何使用 LocalStorage 存储和读取数据

所有操作都通过 window.localStorage 对象完成，主要方法有三个：

存数据：用 setItem(key, value)，value 会自动转成字符串。例如：
localStorage.setItem('theme', 'dark');
取数据：用 getItem(key)，返回字符串或 null（键不存在时）。例如：
const theme = localStorage.getItem('theme'); // "dark"
删数据：用 removeItem(key) 删除单个键，或 clear() 清空全部。

注意：如果要存对象或数组，必须先用 JSON.stringify() 转字符串；读取时再用 JSON.parse() 还原，否则会得到 [object Object] 这类无效结果。

LocalStorage 的主要限制

容量有限：多数浏览器限制在 5–10 MB 左右（按字符串长度算），超出会抛出 QuotaExceededError 异常。
只能存字符串：不支持直接存数字、布尔值、对象、函数等，必须手动序列化和反序列化。
同步阻塞操作：读写都在主线程进行，大数据量可能卡住页面（虽然日常使用几乎感觉不到）。
无过期机制：数据永久存在，除非手动清除或用户清缓存。不能像 Cookie 那样设有效期。
不参与网络请求：服务器完全无法访问 LocalStorage，它纯属前端本地存储，和后端无关。

什么情况下不适合用 LocalStorage

需要存敏感信息（如 token、密码），因为 XSS 攻击可直接读取——应优先用 httpOnly Cookie + 后端校验。
数据量较大（如日志、图片 base64），容易超限且影响性能。
需要跨域共享（不同子域名或协议间），它严格遵循同源策略，iframe 或跨域页面无法互通。
要求事件通知（如一个标签页改了数据，另一个自动响应），LocalStorage 本身不触发事件，需配合 storage 事件监听（但仅对其他窗口生效，当前窗口修改不会触发自身）。

小技巧：安全又方便的封装建议

可以简单封装一层，自动处理 JSON 转换和异常：

const storage = {
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.warn('LocalStorage 写入失败:', e);
    }
  },
  get(key) {
    const str = localStorage.getItem(key);
    try {
      return str ? JSON.parse(str) : null;
    } catch (e) {
      return str; // 解析失败就返回原始字符串
    }
  }
};

这样调用更直观：storage.set('user', { id: 123, name: 'Alice' });，读取也自动还原对象。