我一直在 Firefox (Ubuntu) 中使用 IndexedDB
有没有办法可视化 IndexedDB 数据库内容?还是我必须以编程方式进行?
据报道,最前沿的 Chromium 构建允许您在 Chrome devtools 的资源面板中查看 IndexedDB 内容,但只有我知道一种以非编程方式查看 Firefox IndexedDB 内容的方法,即直接加载 .sqlite 文件。
Firefox 的 IndexedDB .sqlite 文件位于/Users/{USER}/Library/Application Support/Firefox/Profiles/{PROFILE}/indexedDB
OS X 上,应该C:\Users\{USER}\AppData\Roaming\Mozilla\Firefox\Profiles\{PROFILE}
在 Windows 上。
我使用优秀的(免费的)Firefox 工具SQLite Manager,它是跨平台的。
但是要记住的一件事是,内容通常存储为二进制 blob,并且可能不是人类可读的。但是,密钥以文本形式存储,因此应该能够手动读取。
更新虽然本地文件仍然是查看 IDB 数据库和存储的好方法,但 Chrome 现在在资源面板中提供了很好的工具。
我刚刚下载了 Firefox 的 IndexedDB Browser 插件。它运作良好。下载后位于:
工具 > Web 开发人员 > IndexedDB 浏览器
https://addons.mozilla.org/en-US/firefox/addon/indexeddb-browserupdated-fix/
编辑:自 Firefox 26 以来,IndexedDB 的文件已从
{PROFILE}/indexedDB/至
{PROFILE}/存储/持久/当前版本 (0.1.4) 不处理此更改。但是,它可以通过符号链接轻松解决。
Firefox indexedDB location on Ubuntu is:
~/.mozilla/firefox/*.default/storage/persistent/
or
~/.mozilla/firefox-trunk/*.default/storage/persistent/
在新版本的 firefox 中,开发者工具带有一个方便的 Storage Inspector。
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector
目前你必须使用 firefox 的 nightly build 来获得它
你可以试试我的 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
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
我必须从 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' 的内容。