JavaScript操作浏览器存储与本地数据库方法

golang学习网今天将给大家带来《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；本质是键值对 + 对象存储 + 游标遍历。适合离线缓存、邮件草稿、大文件元数据等场景。

初始化和写入的关键步骤：

• 必须用 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，更要谨慎。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。