IndexedDB的观察

摘要:IndexedDB是chrome浏览器内置的NoSQL数据库。观察浏览器自带的 IndexedDB 主要有两种最常用且有效的方法:使用浏览器开发者工具(推荐)和通过 JavaScript 代码。

🛠️ 方法一:使用浏览器开发者工具(最直观)

这是最常用、最可视化的方法,适用于绝大多数现代浏览器,如 Chrome、Edge 和 Firefox。

  1. 打开开发者工具

    在目标网页上,按下快捷键 F12Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS),或者右键点击页面选择"检查"。

  2. 进入应用面板

    在开发者工具的顶部菜单栏中,找到并点击 "Application"(应用)面板。

  3. 查看 IndexedDB

    在左侧的边栏中,找到 "Storage" (存储)部分,展开后点击 "IndexedDB"

    • 你会看到当前网站使用的所有 IndexedDB 数据库列表。
    • 点击数据库名称可以查看其版本号和来源。
    • 继续展开,点击具体的 Object Store(对象存储),右侧面板就会显示其中存储的所有键值对数据。

重要提示:

IndexedDB 的数据在开发者工具中不会实时更新 。如果你在网页上进行了操作导致数据变化,需要手动点击工具栏中的 "Refresh"(刷新)按钮来更新视图。

💻 方法二:使用 JavaScript 代码(更灵活)

如果你需要通过编程方式进行检测或调试,可以在开发者工具的 "Console"(控制台)面板中运行 JavaScript 代码。

  • 列出所有数据库

    使用 indexedDB.databases() 方法可以获取当前源下所有 IndexedDB 数据库的列表。

    javascript 复制代码
    window.indexedDB.databases().then(dbs => {
      console.log("当前源下的数据库:", dbs);
    }).catch(err => {
      console.log("此浏览器不支持 indexedDB.databases() 方法或未使用IndexedDB");
    });
  • 检查特定数据库是否存在

    如果你知道数据库的名称,可以尝试打开它来判断其是否存在。

    javascript 复制代码
    let request = indexedDB.open("MyApp"); // 将 "MyApp" 替换为你的数据库名
    request.onsuccess = function(event) {
      console.log("数据库 'MyApp' 存在");
      event.target.result.close(); // 记得关闭连接
    };
    request.onerror = function(event) {
      console.log("数据库 'MyApp' 不存在或无法访问");
    };
相关推荐
剪刀石头布啊1 小时前
antd中可编辑表格中巧用useWatch实现联动高性能效果,以及定制延伸学习
前端
油丶酸萝卜别吃2 小时前
前端转全栈学习路线
前端·学习
浮生望2 小时前
前端路由进阶:History API原理与手写HistoryRouter
前端
陆枫Larry3 小时前
JavaScript 中的竞态是什么,为啥会有竟态?
前端
上海安当技术5 小时前
半天接入:USBKey RESTful API + C 动态库,Web 和 C/S 两套集成路径实战
前端·后端·restful·集成·usbkey
DevUI团队5 小时前
从“即兴创作”到“规格先行”,华为云码道(CodeArts)代码智能体持续深耕企业级规范驱动开发能力
前端·人工智能·后端
weixin_431600446 小时前
NestJS 入门(3):Guard 如何挡住未登录请求?
前端·后端·学习·nest.js
kyriewen6 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程
IT_陈寒7 小时前
JavaScript类型转换把我坑惨了,这破玩意真该早点搞明白
前端·人工智能·后端
用户938515635077 小时前
Type vs Interface:读完这篇就没有面试官能难倒你了
前端·面试·typescript