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

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'});，读取也自动还原对象。