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

# vue # react # javascript # java # js # 前端 # json # 浏览器 # app # 回调函数 # 硬盘 # 工具

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】