JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

JavaScript

const mock = {
  "id": 0,
  "idGroup": "0nqbPhaDH6",
  "idMerge": "verbose_message",
  "type": "info",
  "level": "verbose",
  "title": null,
  "message": "Hi",
  "data": null,
  "value": null,
  "timestamp": 1669305207282,
  "order": 5,
  "seen": true
}

let store;

main();

async function main() {
  try {
    await init();
    await populate();
    await test();
  } catch (e) {
    console.error(e)
  }
}

async function init() {
  console.time("init");
  store = await localforage.createInstance({
    name: "notif_center_1",
  });
  await store.clear();
  console.timeEnd("init");
}

async function populate() {
  console.time("populate");
  const n = await store.length();
  if (n === 0) {
    for (let i = 0; i < 300; i++) {
      mock.id++;
      const rand = Math.random().toString(36);
      await store.setItem(`item_${rand}`);
    }
  }
  console.timeEnd("populate");
}

async function test() {
  for (let i = 0; i < 20; i++) {

    console.time("test");
    const keys = await store.keys();
    console.timeEnd("test");
  }
}