在多个选项卡中使用indexeddb操作

4jb9z9bj  于 2022-12-28  发布在  IndexedDB
关注(0)|答案(1)|浏览(297)

我试图保存数据从一个标签到indexeddb,并试图从另一个标签获取数据。但操作发生在第二个标签,只有当我关闭第一个标签或关闭indexeddb在第一个标签使用indexeddb.close();
如何从其他选项卡获取indexeddb中的数据(不关闭第一个选项卡或第一个选项卡中的indexeddb示例)?

ipakzgxi

ipakzgxi1#

存储在indexedDB中的数据可用于同一来源中的所有选项卡。首先澄清两个选项卡指向同一来源。
但是indexedDB一次只锁定一个选项卡访问其数据。如果您在一个选项卡中打开了一个indexedDB数据库连接,并尝试在另一个选项卡中打开同一数据库连接,则第二个连接将停止,因为它被另一个选项卡中打开的连接“阻塞”。
注意我说的是stall,而不是fails,这是因为一旦打开连接的标签关闭了连接,或者当版本更改事务完成(onupgradeneded处理函数完成),连接最终会成功(它会被解除阻塞),一旦连接被解除阻塞,尝试打开连接的成功事件最终会触发。
可以通过在打开的连接上调用IDBDatabase.prototype.close来关闭该连接,也可以简单地关闭选项卡。
避免一些不想要的行为和最小化阻塞事件发生频率的一种方法是避免使用全局数据库连接。全局数据库连接指的是您在选项卡打开时打开的数据库连接,比如在加载dom时,然后在选项卡的剩余生命周期中保持打开状态。与在选项卡的整个生命周期中打开一次连接不同,仅在需要时打开连接,然后关闭它,并在每次需要时重新打开连接,然后关闭它。这样,连接在选项卡打开的大部分时间都是关闭的,而不是在大部分时间都是打开的。
有了所有这些借口,你的问题的答案是:
1.在第一个选项卡中,打开连接,写入数据,然后关闭连接。
1.不关闭第一个选项卡,然后在第二个选项卡中,打开连接,读取数据,然后关闭连接。
请注意“blocked”事件。在tab2中添加一个侦听器来侦听该事件。如果您看到此事件,则表示您试图在tab1连接仍处于打开状态时在tab2中进行连接。请更改您的应用程序,以便能够对这种情况做出React。
下面是侦听阻塞事件的简单示例:

function open(name, version, callback) {
  var request = indexedDB.open(name, version);
  request.onsuccess = function(event) {
    var db = request.result;
    callback(result, null);
  };
  request.onerror = function(event) {
    console.log('Failed to connect');
    callback(null, 'error');
  };
  request.onblocked = function(event) {
    console.log('Failed to connect because blocked');
    callback(null, 'blocked');
  };
}

open('foo', 1, function onopen(db, error) {
  if(error === 'error') {
    console.log('cannot do stuff because of error');
  } else if(error === 'blocked') {
    console.log('cannot do stuff because blocked');
  } else {
    console.log('do stuff with db', db.name);

    // do db operation here

    // cleanup when done
    db.close();
  }
});

相关问题