如何在Firefox浏览器中查看IndexedDB内容

27

我一直在Ubuntu系统的Firefox浏览器中使用IndexedDB。

是否有方法可以可视化IndexedDB数据库的内容? 还是必须通过编程的方式来完成?

7个回答

20
最新的Chromium版本据说可以在Chrome开发工具的资源面板中查看IndexedDB内容,但我只知道一种非编程方式查看Firefox IndexedDB内容的方法,那就是直接加载.sqlite文件。Firefox的IndexedDB .sqlite文件位于OS X上的“/Users/{USER}/Library/Application Support/Firefox/Profiles/{PROFILE}/indexedDB”,在Windows上应该是“C:\Users\{USER}\AppData\Roaming\Mozilla\Firefox\Profiles\{PROFILE}”。我使用优秀(且免费)的Firefox工具SQLite Manager,它跨平台。

which looks like this

请注意,需要记住的一件事是,内容通常以二进制块的形式存储,很可能无法被人类阅读。但是,键以文本形式存储,因此应该可以手动阅读。
更新:尽管本地文件仍然是查看IDB数据库和存储的好方法,但Chrome现在在资源面板中提供了出色的工具。

3
我会查看Chromium...大家都说indexedDB是未来趋势。但现在我感觉自己像在黑屋子里用叉子捕捉蝴蝶。无论如何,谢谢你的回答。 - Fernando Fabreti
刚刚建立了一个用户组。如果有任何非常规的问题,请随时发送电子邮件,我会尽力回答。http://groups.google.com/group/indexeddb-users?msg=new&lnk=gcis - buley
SqlLite Manager 真是太棒了。感谢您的提示。是的,它显示值为 blobs,但至少我可以看到所有的对象存储、键等。 - Gene Vayngrib
1
Fernando,我们在IndexedDB中开发的一个主要技巧是等待所有事务结束后再开始任何模式更改,例如添加新的ObjectStore、向现有存储添加索引等。如果您愿意,可以在http://github.com/urbien/urbini中检查indexedDB.js和taskQueue.js的源代码。为此,我们使用jquery-indexeddb.js将IDB请求放入任务队列作为承诺。然后,我们不得不回退到Chrome的文件API,因为Chrome不支持blob。此外,我们还为Safari使用IDB shim - Gene Vayngrib
我正在尝试,但是我没有看到indexeddb文件:///users/{user}/Library/Application Support/Firefox/Profiles/5kaqoz4x.default/的indexeddb教程(简单的待办事项),而且indexeddb应该具有键值对。 - alex
Firefox现在具备这个功能,只需打开开发者工具并转到存储即可。 - Mattwmaster58

9
我刚刚下载了Firefox的IndexedDB浏览器插件。 它能正常使用,下载后可以在以下位置找到它:
工具 > Web开发者 > IndexedDB浏览器 https://addons.mozilla.org/en-US/firefox/addon/indexeddb-browserupdated-fix/ 编辑: 自Firefox 26版以来,IndexedDB文件已从{PROFILE} / indexedDB /移动到 {PROFILE} / storage / persistent /。 当前版本(0.1.4)无法处理此更改,但是可以使用符号链接轻松解决问题。

由于这个插件没有更新,有人制作了一个调整过的版本可以使用:https://addons.mozilla.org/en-US/firefox/addon/indexeddb-browserupdated-fix/ - JW.
已经有一段时间了,但感谢@JW。我更新了链接。 - Nick Johnson

5

这目前是最简单/最好的答案(尽管它现在已经在主版本中了)。 - seren

3
火狐在Ubuntu上的indexedDB位置是:
~/.mozilla/firefox/*.default/storage/persistent/
或者
~/.mozilla/firefox-trunk/*.default/storage/persistent/

对于Pale Moon浏览器:~/home/retro/.moonchild productions/pale moon/*.default/ - Underverse

2
您可以尝试使用我的indexeddbviewer,它位于http://linq2indexeddb.codeplex.com
您需要完成以下步骤: - 将以下引用添加到您的页面中:
<script type="text/javascript" src="../Scripts/jquery-1.7.2.js"> </script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.20.js"> </script>
<script type="text/javascript" src="../Scripts/Linq2IndexedDB.js"> </script>
<script type="text/javascript" src="../Scripts/IndexedDBViewer.js"> </script>

这意味着你需要获取jQuery + jQuery UI和linq2indexedDB(这是我的库,你也可以在http://linq2indexeddb.codeplex.com上获得它)。

为了使其工作,在body中添加以下内容:

<body>
    <p><label id="lblDatabaseName" for="txtDatabaseName">Database name:</label> <input type="text" id="txtDatabaseName" /><input type="button" id="btnViewDatabase" value="View database" /></p>
    <div id="tabs">
        <ul>
        </ul>
    </div>
</body>

我会尽快想出一个更简单的方法。
另一种方法是使用我的linq2indexeddb库,像这样创建一个新实例:
var db = window.linq2indexedDB("Database name", null, true)

如果你已经完成了这个步骤,你可以调用一个属性查看器,它将提供有关IndexedDB数据库的所有信息。
db.viewer

1
let db;
function createDB() {    
    let dbName = "Jokes";
    let dbVersion = 5;
    let request = indexedDB.open(dbName, dbVersion);
    request.onupgradeneeded = e => {
      db = e.target.result
      console.log(db);
      let jstore = db.createObjectStore("JokeStore", {keyPath: "title"});
      let mstore = db.createObjectStore("MockStore", {keyPath: "title"});
      alert("upgrade");
    }
    request.onsuccess = e => {
      db = e.target.result
      console.log(db);
      alert("success");
    }
    request.onerror = e => {
      alert("error"+e.target.error);
    }
}
function addRecord(title, text) {
    let tx = db.transaction("JokeStore","readwrite");
    tx.onerror = e => alert(e.target.error);
    let jstoretx = tx.objectStore("JokeStore");
    jstoretx.add({title: title, text: text});
}
function viewNotes() {
  let tx = db.transaction("JokeStore", "readonly");
  let jstore = tx.objectStore("JokeStore");
  let request = jstore.openCursor();
  request.onsuccess = e => {
    let cursor = e.target.result;
    if (cursor) {
      console.log(cursor.key, cursor.value.text);
      cursor.continue();
    }
  }
}
createDB(); // Creates db if not there or opens an existing one
addRecord("Joke 1", "Knock Knock"); // Adds record
addRecord("Joke 2", "Elephant and the ant"); // Adds record
viewNotes(); // Displays all records in console

0

我需要从 WhatsApp Web 会话中读取 indexedDB,我是这样做的:

function readDB() {
    let dbName = "wawc";
    let dbVersion = 70;
    let request = indexedDB.open(dbName, dbVersion);
    request.onsuccess = e => {
      let db = e.target.result
      let tx = db.transaction("user", "readonly");
      let jstore = tx.objectStore("user");
      let request = jstore.openCursor();
      request.onsuccess = e => {
        let cursor = e.target.result;
        if (cursor) {
          console.log(cursor.key, cursor.value);
          cursor.continue();
        }
      }
    }
    request.onerror = e => {
      console.log("error"+e.target.error);
    }
}
readDB();

控制台日志将显示“wawc”数据库中“user”表的内容。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接