在页面卸载之前保存到IndexedDB

Question

我希望在用户离开我的页面之前将数据保存到IndexedDB中。我会定期执行此操作，但由于数据相当庞大，我不想太频繁地保存。

我的当前（错误的）代码如下：

window.addEventListener('beforeunload', (event) => {
    persist(state);
});

在这里，persist 立即返回一个 Promise ，并且在我有机会保存状态之前，浏览器就退出了。

不幸的是，目前看来 IndexedDB 没有同步 API。

有什么办法可以让浏览器等待，以便我可以将值存储到 IndexedDB 中吗？

- rony l

---

没有一种方法可以将异步API变成同步的 - 使用beforeunload，您可以允许用户取消卸载页面，但无法强制他们这样做。 - Jaromanda X

Answer 1

你可以在页面卸载时将数据保存到localStorage中，然后在稍后的时间检查localStorage中是否有这个值，并在有更多时间时将其移入indexedDB。

- Josh

---

我之前因为大小限制已经从本地存储转移到IndexedDB了... 但是这是一个好建议。 - rony l

仔细考虑后，我可以将我的状态分成两个部分——一个非常核心的小部分，我真的不想丢失它，和一个较大的状态，可以被“遗忘”。 - rony l

很高兴我能帮到你。 - Josh

Answer 2

你的页面上可以有一个类似于保存按钮的东西。

当用户关闭页面时，你可以显示一个对话框，询问是否在不保存的情况下关闭页面。你可以利用这段时间来保存数据，或者由于已经通知用户保存数据，用户可以手动按下保存按钮进行保存。

- Rohith Murali

---

这是一个很好的建议。在我的情况下，如果可能的话，我宁愿不把这个问题丢给用户。我可能会更频繁地保存... - rony l