如何在Safari10.1.2及以上版本正确使用Dexie.js(v2.0.1)数据库

我之前在Safari 10上用Dexie.js的时候也踩过这个一模一样的坑！你的代码在Chrome正常但Safari毫无反应，核心原因是Safari对IndexedDB有严格的触发限制——它不允许在页面加载的全局上下文里直接打开数据库，必须在用户主动触发的交互事件（比如点击、触摸）回调内执行，而且这种拦截不会抛出错误，所以你的then和catch都没触发。

给你几个具体的解决步骤：

• 把数据库初始化/打开逻辑放到用户交互事件里
  比如给页面加个初始化按钮，或者绑定到用户第一次操作（比如登录、点击某个功能按钮）的回调里，示例代码如下：

  // 先提前定义数据库结构，但不要立即打开
  const deviceUserData = new Dexie('deviceUserData');
  deviceUserData.version(1).stores({ userData: 'userName, data'});
  
  // 绑定到用户点击事件，比如页面上的一个按钮
  document.querySelector('#init-db').addEventListener('click', async () => {
    try {
      const result = await deviceUserData.open();
      console.log('open own DB, data:', result);
      // 这里可以继续执行你的数据库读写操作
    } catch (error) {
      console.error('Uh oh : ', error);
    }
  });
  

• 确保运行在安全上下文
  Safari在HTTP环境下会限制IndexedDB的使用，一定要在HTTPS或者localhost（本地开发）环境下测试，否则数据库操作会被静默拦截。

• 额外的兼容性检查
  Dexie v2.0.1在Safari 10上基本兼容，但可以先做个简单的支持性检查，避免在完全不支持的环境下执行：

  if (!window.indexedDB) {
    console.error('你的浏览器不支持IndexedDB');
  }
  

另外要注意，Safari 10的IndexedDB功能相对基础，一些高级操作可能有差异，但你的基础存储逻辑只要按上面的方式调整，就能正常运行了。

内容的提问来源于stack exchange，提问作者okram