如何用Javascript操作浏览器存储与本地数据库？

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，更要谨慎。