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

我正在尝试将一个选项卡中的数据保存到indexeddb，并尝试从另一个选项卡中获取数据。但操作发生在第二个选项卡中，仅当我关闭第一个选项卡或使用indexeddb.close（）关闭第一个选项卡中的indexeddb时

---

如何从其他选项卡（不关闭第一个选项卡或第一个选项卡中的indexeddb实例）从indexeddb获取数据

存储在indexedDB中的数据可供同一来源中的所有选项卡使用。首先澄清两个选项卡指向同一原点

但是，indexedDB将对其数据的访问锁定为一次只访问一个选项卡。如果在一个选项卡中打开了与indexedDB数据库的连接，并试图在第二个选项卡中打开与同一数据库的连接，则第二个连接将暂停，因为它被另一个选项卡中打开的连接阻止

注意，我说的是暂停，而不是失败。这是因为一旦具有打开连接的选项卡关闭连接，连接最终将成功（它将被解锁）。尝试打开连接的成功事件最终将在连接被解锁后触发

可以通过在打开的连接上调用IDBDatabase.prototype.close来关闭连接，或者通过简单地关闭选项卡来关闭连接

避免一些不必要的行为和最小化阻塞事件发生频率的一种方法是避免使用全局数据库连接。所谓全局，我指的是一个数据库连接，您在接近打开选项卡的时间打开它，加载dom等等，然后在选项卡的剩余生命周期中保持打开状态。与其在选项卡的整个生命周期中只打开一次连接，不如只在需要时打开一个连接，然后再关闭它，并在每次需要时重新打开一个连接，然后再关闭它。这样，连接在选项卡打开的大部分时间内关闭，而不是在大部分时间内打开

有了所有这些借口，你的问题的答案是：

在第一个选项卡中，打开连接，写入数据，然后关闭连接

不关闭第一个选项卡，然后在第二个选项卡中打开连接，读取数据，然后关闭连接

请注意“阻止”事件。在tab2中添加一个侦听器来侦听它。如果您目睹了此事件，则在tab1连接仍处于打开状态时尝试在tab2中连接。更改应用程序以能够对此情况作出反应

下面是侦听阻止事件的简单示例：

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();
  }
});

---

锁定到单个选项卡仅在执行版本更改（例如升级或删除数据库）时适用。只有当web应用程序需要修改数据的模式时，才会发生这种情况。如果在正常使用数据库的过程中执行数据库版本更改，则使用API的方式非常不寻常。