Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply expiry times to keys in HTML5 indexeddb?

Tags:

html

indexeddb

In indexedDB in html5 api, I can use it to store key-value pairs. But how can I make sure that after adding a certain key-value, after 1 day, that key should automatically be deleted from the db.

I was thinking of wrapping the value in an object with current datetime, and expiry time, and when u get the value, check the time difference, but is this the best way?

Thanks

like image 514
omega Avatar asked Feb 19 '16 17:02

omega


People also ask

Is IndexedDB supported in HTML5?

Complete HTML/CSS Course 2022The indexeddb is a new HTML5 concept to store the data inside user's browser. indexeddb is more power than local storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster.

Does IndexedDB persist between sessions?

Developers can leverage client storage mechanisms like IndexedDB to improve the user experience of their application by not only persisting state across sessions but also by decreasing the time it takes to load the initial state on repeat visits.

What is the difference between HTML5 web storage and IndexedDB?

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data.

Is IndexedDB slow?

Not slow like a database on a cheap server, even slower! Inserting a few hundred documents can take up several seconds. Time which can be critical for a fast page load.


3 Answers

Yep, what Scott Marcus and dgrogan said. One more hint: if you create an index on the timestamp, you can iterate a cursor over the range of "expired" values and delete them after opening the database.

const open = indexedDB.open("demo");

open.onupgradeneeded = function () {
  const db = open.result;
  const store = db.createObjectStore("store");
  const index = store.createIndex("timestamp", "timestamp");

  // Populate with some dummy data, with about half from the past:
  for (let id = 0; id < 20; ++id) {
    store.put(
      {
        value: Math.random(),
        timestamp: new Date(Date.now() + (Math.random() - 0.5) * 10000),
      },
      id
    );
  }
};

open.onsuccess = function () {
  const db = open.result;
  const tx = db.transaction("store", "readwrite");
  // Anything in the past:
  const range = IDBKeyRange.upperBound(new Date());

  tx
    .objectStore("store")
    .index("timestamp")
    .openCursor(range).onsuccess = function (e) {
    const cursor = e.target.result;
    if (!cursor) return;
    console.log("deleting: " + cursor.key);
    cursor.delete();
    cursor.continue();
  };

  // This transaction will run after the first commits since
  // it has overlapping scope:
  const tx2 = db.transaction("store");
  tx2.objectStore("store").count().onsuccess = function (e) {
    console.log("records remaining: " + e.target.result);
  };
};
like image 168
Joshua Bell Avatar answered Oct 09 '22 15:10

Joshua Bell


Support for automatically expiring IndexedDB and other storage data is being considered. See https://github.com/whatwg/storage/issues/11. It would be helpful if you could describe your use case there.

In the meantime you'll have to do something like you outlined or what Scott Marcus suggests.

like image 30
dgrogan Avatar answered Oct 09 '22 15:10

dgrogan


IndexedDB can only be modified by code. It has no automatic capabilities. Why not just store the data with a timestamp value and modify your code to remove it when the timestamp is out of date?

like image 36
Scott Marcus Avatar answered Oct 09 '22 15:10

Scott Marcus