如何在 Firefox 中查看 IndexedDB 内容
Posted
技术标签:
【中文标题】如何在 Firefox 中查看 IndexedDB 内容【英文标题】：How to view IndexedDB content in firefox 【发布时间】：2012-04-08 09:57:54 【问题描述】：我一直在 Firefox (Ubuntu) 中使用 IndexedDB
有没有办法可视化 IndexedDB 数据库的内容？ 还是我必须以编程方式进行？
【问题讨论】：
【参考方案1】：据报道，最前沿的 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，它是跨平台的。
但是要记住的一件事是，内容通常存储为二进制 blob，并且很可能不是人类可读的。但是，密钥以文本形式存储，因此应该能够手动读取。
更新虽然本地文件仍然是查看 IDB 数据库和存储的好方法，但 Chrome 现在在资源面板中提供了很好的工具。
【讨论】：
将看看 chromium... 每个人都在说 indexedDB 是未来。现在，我发现自己在黑暗的房间里用叉子打蝴蝶。不管怎样，谢谢你的回答。 只设置一个用户组。随意通过电子邮件发送非直截了当的问题，我会尽力回答。 groups.google.com/group/indexeddb-users?msg=new&lnk=gcis SqlLite 管理器很棒。谢谢你的提示。是的，它将值显示为 blob，但至少我看到了所有的对象存储、键等。 Fernando，我们必须为 IndexedDB 开发的一个主要技巧是等到所有事务结束后再开始任何架构更改，例如添加新的 ObjectStore、向现有存储添加索引等。如果你喜欢，您可以在github.com/urbien/urbini 中查看 indexedDB.js 和 taskQueue.js 的来源，为此我们使用jquery-indexeddb.js 将 IDB 请求作为承诺放入 taskQueue。然后我们不得不回退到 Chrome 的文件 api，因为 Chrome 不支持 blob。另外，我们在 Safari 中使用了 IDB shim... 我正在尝试但我没有看到 indexeddb file:///users/user/Library/Application Support/Firefox/Profiles/5kaqoz4x.default/ indexeddb 教程（简单的待办事项) 和 indexeddb 应该有键值对【参考方案2】：我刚刚下载了 Firefox 的 IndexedDB Browser 插件。它运作良好。下载后位于：
工具 > Web 开发人员 > IndexedDB 浏览器
https://addons.mozilla.org/en-US/firefox/addon/indexeddb-browserupdated-fix/
编辑： 从 Firefox 26 开始，IndexedDB 的文件已经从
PROFILE/indexedDB/到
PROFILE/storage/persistent/当前版本 (0.1.4) 不处理此更改。但是，它可以通过符号链接轻松解决。
【讨论】：
由于此插件尚未更新，因此有人制作了一个可以工作的调整版本：addons.mozilla.org/en-US/firefox/addon/… 已经有一段时间了，但感谢@JW。我更新了链接。【参考方案3】：Ubuntu 上的 Firefox indexedDB 位置是：
~/.mozilla/firefox/*.default/storage/persistent/
或
~/.mozilla/firefox-trunk/*.default/storage/persistent/
【讨论】：
对于苍白的月亮：~/home/retro/.moonchild productions/pale moon/*.default/【参考方案4】：
你可以试试我的 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>
<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
【讨论】：
【参考方案5】：在新版本的 firefox 中，开发者工具附带了一个方便的 Storage Inspector。
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
目前你必须使用firefox的nightly build来获取它
https://nightly.mozilla.org/
【讨论】：
【参考方案6】：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
【讨论】：
【参考方案7】：我必须从 WhatsApp 网络会话中读取 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' 的内容。
【讨论】：
以上是关于如何在 Firefox 中查看 IndexedDB 内容的主要内容，如果未能解决你的问题，请参考以下文章