使用Dexie进行本地存储不能持久化。

Question

我正在使用Dexie来访问一个闪卡制作项目中的IndexedDB。我可以按预期操作数据库，并且如果我关闭并重新打开浏览器，它会留在数据库中，但是经常在我几天没有工作后再次打开项目时，我放入数据库中的存储数据不再存在。

我进行了一些研究，并发现我需要使数据库持久化，但我无法弄清楚如何做到这一点。

我基本上从Dexie Storage Manager page中复制了推荐的代码，并将其放入主页index.js的onLoad函数中。以下是相关的代码：

//When the page loads, display the decks in ul on the webpage.
window.addEventListener('load', onLoad);
async function onLoad() {
   
   //Check how much data is available.
   showEstimatedQuota();
 
   //Make sure the storage is persistent.
   isStoragePersisted().then(async isPersisted => {
     if (isPersisted) {
       console.log(":) Storage is successfully persisted.");
     } else {
       console.log(":( Storage is not persisted.");
       console.log("Trying to persist..:");
       if (await persist()) {
         console.log(":) We successfully turned the storage to be persisted.");
       } else {
         console.log(":( Failed to make storage persisted");
       }
     }
   });
}

上述的onLoad函数引用了我在dexie-setup.js中保存的三个函数:

//This function makes the storage persistent.
//(Copied from https://dexie.org/docs/StorageManager)
async function persist() {
  return await navigator.storage && navigator.storage.persist &&
    navigator.storage.persist();
}


//This function checks if the storage is persistent.
//(Copied from https://dexie.org/docs/StorageManager)
 async function isStoragePersisted() {
  return await navigator.storage && navigator.storage.persisted &&
    navigator.storage.persisted();
}


//This function logs to console how much data is available.
//(Copied from https://dexie.org/docs/StorageManager)
async function showEstimatedQuota() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimation = await navigator.storage.estimate();
    console.log(`Quota: ${estimation.quota}`);
    console.log(`Usage: ${estimation.usage}`);
  } else {
    console.error("StorageManager not found");
  }
}

我的控制台日志：

• dexie-setup.js:56 配额：6358499328

• dexie-setup.js:57 使用量：25370

• index.js:30 :( 存储未被持久化。

• index.js:31 尝试持久化..：

• dexie-setup.js:84 检查 dexie 完成。

• index.js:33 :) 我们成功地将存储设为持久化。

然而，如果我刷新页面，我的控制台上仍会记录相同的内容：数据库仍然设置为不持久。

showEstimatedQuota 函数检查数据存储并确认 DataStorage API 正常工作，所以我认为这不是问题。(我只存储了一些带有文本的小对象，所以我不期望超过存储限制。)

到目前为止，该项目完全在我的 Chromebook 上本地运行，并在 Chrome 浏览器上查看。

请告诉我如何使我的数据库持久化。我对此很新 (这是我在 stackoverflow 上的第一个问题！)，所以希望它是一个容易解决的问题！提前感谢。

- LFdC

---

你找到解决方案了吗？我也遇到了同样的问题。 - Sadman Yasar Sayem

Answer 1

我发现唯一的方法是，如果用户收藏了该网站，则可以使用 persist 函数启用持久存储：

//This function makes the storage persistent.
//(Copied from https://dexie.org/docs/StorageManager)
async function persist() {
  return await navigator.storage && navigator.storage.persist &&
    navigator.storage.persist();
}

因此，当您的网站加载时，您可以提示用户将其添加到书签中。

- Sadman Yasar Sayem

Answer 2

引用Dexie文档：“尽管IndexedDB是一个功能完整的Web客户端数据库，但默认情况下它不是一种持久存储。没有StorageManager的IndexedDB只是一种“尽力而为”的数据库，可能会在设备磁盘空间不足的情况下被清除。浏览器可能会在需要为其他网站的数据腾出空间时删除您的数据库，而不通知用户。”

因此，您无法使数据库持久化。只能尽力而为。 以下链接可能会有所帮助：

1. https://web.dev/persistent-storage/ 2. Chrome.Storage.Local Persistence 希望对您有所帮助。

- Zero

---

这并没有提供答案。一旦您拥有足够的声望，您就可以评论任何帖子； 相反，提供不需要询问者澄清的答案。- 来自审核 - Nick Vu