Local Storage using Dexie not staying persistent

Question

I am using Dexie to access IndexedDB on a flash card maker project. I can manipulate the database as expected, and it stays in the database if I close and reopen the browser, but often when I open up the project after not working on it for a few days, the stored data I put into the database isn't there any longer.

I did some research and discovered that I need to make the database persistent, but I can't figure out how to do that.

I have pretty much copied the recommended code from the Dexie Storage Manager page into the onLoad function for the main page, index.js. Here is the relevant code:

//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");
       }
     }
   });
}

The above onLoad function references three functions I have saved on 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");
  }
}

My console logs:

dexie-setup.js:56 Quota: 6358499328
dexie-setup.js:57 Usage: 25370
index.js:30 :( Storage is not persisted.
index.js:31 Trying to persist..:
dexie-setup.js:84 Done checking dexie.
index.js:33 :) We successfully turned the storage to be persisted.

However, if I refresh the page, I get the same thing logged on my console: the database is still set to not persistent.

The showEstimatedQuota function checks the data storage and confirms that the DataStorage API is functioning, so I don't think that's the problem. (I'm only storing small objects with text in them, so I don't expect to exceed the storage limit, anyway.)

So far, the project is entirely local on my chromebook, and I am viewing it on a Chrome browser.

Please let me know how to make my database persistent. I'm pretty new to this (this is my first question on stackoverflow!), so hopefully it's an easy problem to solve! Thanks in advance.

Have you found a solution? I'm facing the same issue. – Sadman Yasar Sayem Jun 25 '22 at 10:40 — Sadman Yasar Sayem, Jun 25 '22 at 10:40

score 0 · Answer 1 · answered Mar 25 '22 at 03:03

citing the documentation of Dexie: "Even though IndexedDB is a fully functional client-side database for the web, it is not a persistent storage by default. IndexedDB without StorageManager is just a “best-effort” database that can be erased in situations of low disk space on a device. The browser may delete your database without notifying the user in case it needs to free up space for other website’s data that was used more recently than yours."

So, you can't make the database persistent. Just make a “best-effort”. This links can be of help:

I hope it will be of help to you.

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31371743) — Nick Vu, Mar 30 '22 at 04:00

score 0 · Answer 2 · answered Oct 08 '22 at 00:12

The only way I have found is that if the user bookmarks the site then it enables persistent storage using the persist function:

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

So you may prompt the user to bookmark your site when it loads.

Local Storage using Dexie not staying persistent

2 Answers2