localStorage和sessionStorage只支持字符串，存对象需JSON.stringify()序列化、JSON.parse()解析；IndexedDB是事务型键值数据库，需open、onupgradeneeded建库、事务内操作；容量限制需estimate()检测并降级处理；清理应按前缀而非全局clear()。
localStorage 和 sessionStorage 的读写必须用字符串
它们只支持 string 类型，存对象或数组会自动调用 toString()，结果通常是 [object Object] 或 1,2,3，取出来无法还原。
正确做法是手动序列化和解析：
localStorage.setItem('user', JSON.stringify({ id: 123, name: 'Alice' }));
const user = JSON.parse(localStorage.getItem('user') || '{}');
常见错误包括：
- 没处理
getItem()返回null，直接传给JSON.parse()报错Unexpected token u in JSON at position 0 - 用
sessionStorage存大量数据，误以为它比localStorage更“安全”——其实两者都明文可读，仅作用域不同 - 在 iframe 或跨域子页面中访问主站的
localStorage，因同源策略被拒绝，不报错但返回null
IndexedDB 是唯一浏览器内置的事务型本地数据库
它不是 SQL 数据库，没有 SELECT 语句，也不支持 JOIN；本质是键值对 + 对象存储 + 游标遍历。适合离线缓存、邮件草稿、大文件元数据等场景。
立即学习“Java免费学习笔记（深入）”；
初始化和写入的关键步骤：
- 必须用
indexedDB.open()并监听onupgradeneeded创建 objectStore，否则后续操作全失败 - 所有读写必须在事务（
IDBTransaction）内进行，且事务生命周期短——离开回调函数即自动关闭 - 不能直接 await
add()或get()，要包装 Promise 或用 async/await 工具函数
简化的写入示例：
function saveToDB(data) {
return new Promise((resolve, reject) => {
const req = indexedDB.open('myDB', 1);
req.onupgradeneeded = e => {
const db = e.target.result;
if (!db.objectStoreNames.contains('notes')) {
db.createObjectStore('notes', { keyPath: 'id' });
}
};
req.onsuccess = () => {
const db = req.result;
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
const addReq = store.add(data);
addReq.onsuccess = () => resolve();
addReq.onerror = () => reject(addReq.error);
};
req.onerror = () => reject(req.error);
});
}
localStorage 有 5–10MB 限制，IndexedDB 通常 50MB 起步但不固定
实际容量取决于浏览器和用户设置。Chrome 对单个 origin 的 IndexedDB 限制约为硬盘可用空间的 60%，但首次写入超限时只会静默失败（onblocked 或 onerror 可能不触发），不会抛异常。
检测是否快满的方法有限，推荐：
- 写入前用
navigator.storage.estimate()查剩余配额（需 HTTPS，且返回的是估算值） - 对关键写入操作加 try/catch + 回退逻辑（比如降级到内存缓存或提示用户清理）
- 避免在
onupgradeneeded中执行耗时操作，否则会阻塞整个数据库打开流程，影响首屏体验
不要在 React/Vue 组件卸载时盲目清空 localStorage
很多教程建议在 useEffect 的 cleanup 函数里调用 localStorage.clear()，这会导致整个站点的持久化状态丢失，不只是当前组件相关数据。
更稳妥的做法是：
- 按命名空间前缀管理 key，如
myapp:user、myapp:settings，删除时用正则匹配清除 - 敏感操作（如登出）才清理，且明确指定 key 列表，而非全局清空
- 服务端 Token 过期后，前端应只删认证相关字段，保留用户偏好等非敏感数据
例如：
function clearUserRelated() {
Object.keys(localStorage)
.filter(k => k.startsWith('myapp:user') || k === 'myapp:token')
.forEach(k => localStorage.removeItem(k));
}
IndexedDB 没有“一键清空”接口，必须手动删 objectStore 或整个 database，更要谨慎。
