Javascript 我的service worker中的IndexedDB add()成功,但我无法在Chrome开发工具应用程序/存储中看到它的数据
我在MacOS/OSX 12.3上的Chrome版本57.0.2987.110(64位) 我设法让一名服务人员工作,但我必须说,我在这方面是新手 我现在尝试让它使用IndexedDB并在其中存储数据 它以http格式从本地web服务器获取数据,并以json格式毫无问题地检索数据 数据格式为:Javascript 我的service worker中的IndexedDB add()成功,但我无法在Chrome开发工具应用程序/存储中看到它的数据,javascript,google-chrome-devtools,indexeddb,service-worker,Javascript,Google Chrome Devtools,Indexeddb,Service Worker,我在MacOS/OSX 12.3上的Chrome版本57.0.2987.110(64位) 我设法让一名服务人员工作,但我必须说,我在这方面是新手 我现在尝试让它使用IndexedDB并在其中存储数据 它以http格式从本地web服务器获取数据,并以json格式毫无问题地检索数据 数据格式为: [{"id":"1", "...":"...", ...}, {"id":"2", "...":"...", ...}, {"id":"3", "...":"...", ...}, ... {"id
[{"id":"1", "...":"...", ...},
{"id":"2", "...":"...", ...},
{"id":"3", "...":"...", ...},
...
{"id":"n", "...":"...", ...}]
然后它将数据添加到IndexedDB中,显然没有问题,因为onsuccess回调被触发
entityObjectStore.add success : Event {isTrusted: true, type: "success", target: IDBRequest, currentTarget: IDBRequest, eventPhase: 2…}
但它不会出现在Chrome开发工具中
这是我的服务人员:
self.addEventListener('install',function(event)
{
event.waitUntil(
(new Promise(function(resolve,reject)resolve()}))
.then(function()
{return self.skipWaiting();}));
});
self.addEventListener('activate', function(event)
{
event.waitUntil(
(new Promise(function(resolve,reject){resolve()}))
.then(function() {return self.clients.claim();}));
});
self.addEventListener('message', function(event)
{
if(event.data.command=="data.load")
{
var options = event.data.options
var url = new URL(event.data.host+options.source);
var parameters = {entity:options.name,
options:encodeURIComponent(options.options)};
Object.keys(parameters)
.forEach(key => url.searchParams.append(key,
parameters[key]))
fetch(url).then(function(response)
{
if(response.ok)
{
response.json().then(function(data_json)
{
var entityData = data_json;
var request = indexedDB.open(options.name);
request.onerror = function(event)
{
console.log("indexedDB.open error :",event);
};
request.onsuccess = function(event)
{
console.log("indexedDB.open success :",event)
var db = event.target.result;
}
request.onupgradeneeded = function(event)
{
console.log("indexedDB.open upgrade :",event)
var db = event.target.result;
db.createObjectStore(options.options.id, { keyPath: "id" });
objectStore.transaction.oncomplete = function(event)
{
var entityObjectStore = db.transaction(options.options.id, "readwrite").objectStore(options.options.id);
for (var i in entityData)
{
var addRequest = entityObjectStore.add(entityData[i]);
addRequest.onerror = function(event)
{
console.log("entityObjectStore.add error :",event);
};
addRequest.onsuccess = function(event)
{
console.log("entityObjectStore.add success :",event);
};
}
}
};
});
}
});
}
else if(event.data.command=="data.get")
{
var command = event.data;
var request = indexedDB.open(command.domain);
request.onerror = function(event)
{
console.log("indexedDB.open error :",event);
};
request.onsuccess = function(event)
{
console.log("indexedDB.open success :", event)
var db = event.target.result;
var transaction = db.transaction([command.domain]);
var objectStore = transaction.objectStore(command.entity);
var request = objectStore.get(command.id);
request.onerror = function(event)
{
console.log("objectStore.get error :",event);
};
request.onsuccess = function(event)
{
console.log("objectStore.get success :",event);
console.log("request.result=" + request.result);
};
}
}
});
以下是我使用的HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>My service worker app</title>
</head>
<body>
<button id="update">Update</button>
<div id="log"></div>
<script type="text/javascript">
function sendMessage(message)
{
return new Promise(function(resolve, reject)
{
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event)
{
if (event.data.error)
{
reject(event.data.error);
}
else
{
resolve(event.data);
}
};
});
}
if (navigator.serviceWorker.controller)
{
var url = navigator.serviceWorker.controller.scriptURL;
var initData = [
{
name:"my_entity_type",
source:"/webapp/data",
options:{id:"my_entity_type_id"}
}
]
for(var dataIndex in initData)
{
var data = initData[dataIndex]
sendMessage({
command:"data.load",
host: document.location.origin,
options: data
});
}
}
else
{
navigator.serviceWorker.register('/webapp/lt_sw.js')
.then(function(registration)
{
debug('Refresh to allow ServiceWorker to control this client', 'onload');
debug(registration.scope, 'register');
});
}
navigator.serviceWorker.addEventListener('controllerchange',
function()
{
var scriptURL = navigator.serviceWorker.controller.scriptURL;
debug(scriptURL, 'oncontrollerchange');
});
document.querySelector('#update').addEventListener('click',
function()
{
navigator.serviceWorker.ready.then(function(registration)
{
registration.update()
.then(function()
{
console.log('Checked for update');
})
.catch(function(error)
{
console.error('Update failed', error);
});
});
});
function debug(message, element)
{
var target = document.querySelector('#log');
console.log(element,":",message)
target.textContent = message;
}
</script>
</body>
</html>
我添加了以下行:
indexedDB.webkitGetDatabaseNames().onsuccess = function(sender,args){ console.log("data.get all dbs:",sender.target.result); };
在数据查找部分的开头:
else if(event.data.command=="data.get")
{
要列出Chrome上的所有IndexedDB,如下所述:
我得到了我以前创建的所有数据库
data.get all dbs: DOMStringList {0: "db1", 1: "db2", 2: "db3", 3: "db4", length: 4}
然后,我继续列出这些数据库中的所有ObjectStore,如前一个链接所述,添加以下行:
indexedDB.open(<databaseName>).onsuccess = function(sender,args)
{"<databaseName>'s object stores",console.log(sender.target.result.objectStoreNames); };
然后我看了一下物品商店里面
indexedDB.open("db3").onsuccess = function(event)
{event.target.result.transaction(["db3"]).objectStore("db3")
.getAll().onsuccess = function(event)
{console.log("objectStore.getAll() success :",event.target.result)};};
参赛作品如预期的那样在那里!但不在应用程序/存储中
编辑2:
db2的错误显然是我没有刷新数据库中的数据。。。这部分现在起作用了
编辑3:
答案很简单,只需关闭并重新打开开发工具。。。就像@wOxxOm建议的那样 您也可以选中“重新加载时更新”按钮,然后尝试按与@wOxxOm相同的效果重设ctrl/shift+f5
。
您也可以选中“重新加载时更新”按钮,然后尝试按与@wOxxOm相同的效果重设ctrl/shift+f5
。
如果我关闭DevTools并再次打开,它对我有效。你试过了吗?如果我关闭DevTools并再次打开,它对我有效。你试过了吗?试着重新打开devtools。哈哈,谢谢@wOxxOm,关闭并重新打开工具很有效!你应该发布一个答案,这样我就可以接受了。试着重新打开devtools。哈哈,谢谢@wOxxOm,关闭并重新打开工具工作!你应该发布一个答案,这样我就可以接受了。是的,我是在@wOxxOm建议之后做的,就像在我的第三版中写的一样。是的,我是在@wOxxOm建议之后做的,就像在我的第三版中写的一样。谢谢你提供了这个替代解决方案!感谢您提供此替代解决方案!
db1's object stores DOMStringList {0: "db1", length: 1}
db2's object stores DOMStringList {length: 0}
db3's object stores DOMStringList {0: "db3", length: 1}
db4's object stores DOMStringList {0: "db4", length: 1}
indexedDB.open("db3").onsuccess = function(event)
{event.target.result.transaction(["db3"]).objectStore("db3")
.getAll().onsuccess = function(event)
{console.log("objectStore.getAll() success :",event.target.result)};};