如果我在多个选项卡中打开了 IndexedDB
数据库,我可以在不重新加载的情况下跟踪所有选项卡上的数据更改吗?
最佳答案
为了扩展 dumbmatter 的回答,这里是我如何使用 BroadcastChannel 实现它的。如果您需要更多支持,我建议您使用 postMessage而不是 BroadcastChannel。
function putThing(db, channel, thing) {
return new Promise(function(resolve, reject) {
const transaction = db.transaction('things', 'readwrite');
transaction.oncomplete = function(event) {
const message = {operation: 'updated', id: thing.id};
channel.postMessage(message);
resolve();
};
transaction.onerror = function(event) {
reject(event.target.error);
};
const store = transaction.objectStore('things');
store.put(thing);
});
}
// In tab where operation occurs
const db = await open(...);
const channel = new BroadcastChannel('myChannel');
await putThing(db, channel, thing);
channel.close();
db.close();
// In other tab where you want observation of changes
const channel = new BroadcastChannel('myChannel');
channel.onmessage = function(event) {
const message = event.data;
console.log('A message occurred', message);
};
几点:
- channel 不能向自己广播,所以它自己的 same-tab onmessage 监听器函数不会得到它的消息。但是,您可以在同一个选项卡上创建多个具有相同 channel 名称的 channel 实例,如果您需要该功能,每个 channel 都将收到其他 channel 的消息。
- channel 应该是短暂的,所以在完成后关闭 channel 。然而,这也可能是您希望 channel 在页面打开时保持打开状态的情况
- channel 消息遵循与在数据库中存储对象类似的限制,例如您只能传递简单属性值之类的数据,不能传递函数或自定义对象实例
关于javascript - 从另一个选项卡获取有关 IndexedDB 更新的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55647788/