LocalStorage是轻量级键值存储系统，仅支持字符串键值、同源访问、容量5–10MB；提供setItem/getItem/removeItem/clear四个同步API；存取对象需JSON序列化/解析；可封装命名空间、过期机制与错误降级策略。
LocalStorage 本身就是一个轻量级的键值（KV）存储系统，它天然支持字符串类型的键和值，无需额外构建“数据库”——只需合理封装读写逻辑、处理类型转换和异常，就能当作简易 KV 数据库使用。
基础用法：存、取、删、查
LocalStorage 提供四个核心方法：setItem()、getItem()、removeItem() 和 clear()，全部操作同步且仅限同源页面访问。
-
存数据：必须传入字符串值，非字符串会自动转为字符串（如
localStorage.setItem('count', 42)实际存的是"42"） -
取数据：返回字符串或
null（键不存在时），需手动解析（如 JSON 字符串要用JSON.parse()） -
删单条：用
removeItem('key')；清空全部用clear() -
查所有键：通过
Object.keys(localStorage)或循环localStorage.key(i)获取键名列表
支持结构化数据：自动序列化与反序列化
直接存对象或数组会变成 [object Object]，因此建议封装一个带 JSON 处理的工具函数：
const kv = {
set(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
console.warn('LocalStorage 写入失败：', e.message);
}
},
get(key) {
const str = localStorage.getItem(key);
if (str === null) return undefined;
try {
return JSON.parse(str);
} catch (e) {
return str; // 解析失败，原样返回字符串
}
},
remove(key) {
localStorage.removeItem(key);
}
};这样就能安全地存取对象：kv.set('user', {name: 'Alice', age: 30})，再用 kv.get('user') 拿回原对象。
立即学习“前端免费学习笔记（深入）”；
增强可靠性：容量检查与错误降级
LocalStorage 容量通常为 5–10MB（因浏览器而异），但写入超限时会抛出 QuotaExceededError。实际使用中应主动检测并提供备选方案：
- 写入前用
try...catch捕获异常 - 简单估算大小：
new Blob([JSON.stringify(value)]).size可粗略判断是否接近上限 - 降级策略示例：写入失败时改用内存对象缓存（
const fallback = {}），并提示用户“离线数据暂存于本页”
进阶技巧：命名空间隔离与过期机制
LocalStorage 是全局共享的，多人协作或多个模块共用时易冲突。可通过前缀模拟命名空间：
const userDB = {
prefix: 'user_',
set(key, value) {
localStorage.setItem(this.prefix + key, JSON.stringify(value));
},
get(key) {
const str = localStorage.getItem(this.prefix + key);
return str ? JSON.parse(str) : undefined;
}
};若需过期控制，可存一个带时间戳的对象：{value: ..., expires: Date.now() + 60 * 60 * 1000}，读取时先校验 expires 是否过期，过期则自动删除并返回 undefined。
不复杂但容易忽略：LocalStorage 只在当前协议+域名+端口下可用，且不跨标签页实时同步（需监听 storage 事件才能响应其他窗口的变更）。
