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