?? ?? ??? ? ???? ????, ???? ??? ????, ???? ??? ????? ???? ??? ????? ??? ???? INDEXEDDB? ???????. 1. ?? ?? ??? ? ??? (? : ??, ?? ? API ??)? ??????. 2. PWA ?? ???? ??? ?????. 3. ???? ?? ???? ????? ????? (? : ?? ? ??, ??); 4. ?? ? ???? ?? ?? ??? (Blobs ??). ??? ??? ? ? ? (? : ??? ?? ??, ??), ??? ?? ?? ??????? ??? ???? ???? LocalStorage ?? SessionStorage? ?? ????????. IndexedDB? ?????? ?? ??? ????? ???? ????? ??? ?? ????? ??? ?? LocalStorage? ??? ????? ?????. ? ??? ??? ???? ??? ?? ??? ???????. ??? ??? ??? ????. ??? ?? ??? ??? ?? indexedDB? ?? ? ? ???, ??? ??? ??? ???? ?????.

?? ? ??????? ?? ? ? ????? ??? ???? ????? ???? ?? ?????. ?? ???? ??, ?? ? ? ???? ??? ??. localStorage ???? ?? ????? ?? ??? ? ???? ?? ? ? ?????. ?? ???? ???? ????.

IndexedDB? ?? ? ???? ???? ????? ??? ?? ??? ? ???? ?????? ???? ??? API???. ???? ?? ?? ??? ?? ? ??? ??? ?????. PWA, ???? ?? ?? ????? ??? ????? ? ???? ??? ?? IndexedDB? ?? ?? ??? ??? ??? ?????.

??? INDEXEDDB? ????? ???? ? ????? ???? ??????.

? indexeddb? ?????? (??? ??? ?? ??)

??? ?? ?? indexeddb? ??????.

• ?? ?? ??? ? ??? (? : ??? ??, ?? ? API ??, ??? ?? ???)? ???????.
• ???? ?? (? : PWAS)? ????.
• ??? (? : ??, ?? ?)? ???? ???? ????? ?? ?????.
• ?? ??? ?? ???? ?? ?? ???? ????? (???? ??).

??? ?? ?? localStorage ?? sessionStorage ??????.

• ?? ??? ? ? ? (? : ??? ?? ??, ??)? ???? ????.
• ?? ? ????? ???? ????.
• ???? ?? ??? ?? ??? ?????.

? localStorage ????? ??????. IndexedDB? ???? ?????????.

? IndexedDB? ?? ??

??? ???? ?? ??? ?? ??? ??????.

• ?????? : ??? ? ???? (? ?? ?? ? ??).
• ?? ??? : SQL? ???? ????? ??? (??)? ?????.
• ? : ? ???? ?? ?? ??? (?? ?? ? ? ??).
• ?? : ?? ??? ?? ??? ????? (??? ??).
• ??? : ?? ?? ?? ???? ?? ??? ?? ? ? ????.
• ?? : ???? ????? ???? ? ?????.

IndexedDB? ???? ?? ??? ????? (?? ???? ??? ?????). ???? ????? "??"?? ????. ???? ?? ?? ?? ???? ?????.

? ? ?? ?? ? ?? (?? ??)

IndexedDB? ?? API? ??? ????? ???? ????? ??? ?? ?????. ???? ???? ?? ??? ????.

 // ??????? ??? ?????
?? opendb () {
  ??? ??? ????? ((??, ??) => {
    const request = indexeddb.open ( 'myappdb', 1);

    // ?????? ????? ?? (?? ?? ?? ??)
    request.onupgradeneed = (???) => {
      const db = event.target.result;

      // "??"? ?? ?? ??? ??
      if (! db.objectStorenames.contains ( 'products')) {
        const store = db.createobjectStore ( 'products', {kyypath : 'id', autoincrement : true});

        // ?????? ?? ? ???? ????
        store.createIndex ( '??', '????', {?? : ??});
      }
    };

    request.onsuccess = () => resolve (request.result);
    request.onerror = () => ?? (request.error);
  });
}

?? ???? ??, ?? ? ???????.

??? ??

 ??? ?? AddProduct (??) {
  const db = await opendb ();
  const tx = db.transaction ( 'products', 'readwrite');
  const store = tx.objectstore ( '??');

  store.add (??);
  ?? tx.done;
}

?? ??? ??????

 ??? ?? getAllProducts () {
  const db = await opendb ();
  const tx = db.transaction ( 'products', 'readonly');
  const store = tx.objectstore ( '??');

  ??? ??? ????? ((??, ??) => {
    const request = store.getall ();
    request.onsuccess = () => resolve (request.result);
    request.onerror = () => ?? (request.error);
  });
}

??? ? ?? (? : ?? ?)

 Async ?? getProductsByCategory (????) {
  const db = await opendb ();
  const tx = db.transaction ( 'products', 'readonly');
  const store = tx.objectstore ( '??');
  const index = store.index ( 'category');

  ??? ??? ????? ((??, ??) => {
    const request = index.getall (????);
    request.onsuccess = () => resolve (request.result);
    request.onerror = () => ?? (request.error);
  });
}

? ?????? : ?? ??/??? ?????? ???? ??? ???? ???? ????? ??????? ( tx.done ).

? ?? ????? ?

1. ??? ?? ????? indexeddb? ??????

   • indexedDB.open() ??? ????? ????? ????. ??? ???? ?? ??? ?? ??? ?? ??? ????.

2. ?? ?????? ???? ?????

   • ???? ????? ?? ??? ???????. ?? ??? ?? ???? ??/???? ?? onupgradeneeded ??????.

3. ??? ?? ???? ?????

   • ?? (? : status , createdAt )? ?? ?? ???? ???? ????.

4. ??? ??? ??????

   • ????? ????? ????? (????? ???? 50% –80%). quotaerror ? ?? ???? ?????.

5. ??? ???? ??????

   • ?? ?? ?? ???? ????? ?? ?? ???? ?? ???? ?????.

6. ? ??? ??? cursor ??????

   • getAll() ?? ??? ???? ? ?? ??? ???? ???? ??? ??? ?????.

 const request = store.opencursor ();
request.onsuccess = (???) => {
  const cursor = event.target.result;
  if (cursor) {
    console.log ( 'item :', cursor.value);
    cursor.continue (); // ???? ?????
  }
};

? ?? ? ???

Raw IndexedDB? ????? ??? ?? ??? ??????.

• dexie.js- ??? ????? ??/????? ???? ???? ??? ??????.

   const db = new Dexie ( 'myappdb');
  db.version (1) .Stores ({Products : 'id, category'});
  db.products.add? ???? ???? ({?? : '??', ???? : 'Electronics'});

• IDB -Jake Archibald? ?? (1.5KB) ?? ?? ???.
• LocalForage localStorage ? ?? API? ????? ?? ???? indexeddb? ?????.

???? ??? ???? ?? ??? edB? ?? ? ???? ?? ????.

---

? ?? ??

INDEXEDDB? ????? ?????. ??? ??? ???? localStorage ? ?????. ??? ?????? ???, ?? ?? ?? ?? ???? ?? ???? ?? IndexEdDB? ??? ?????.

??? ?? : DB? ?? ??? ?? ???? ??? ?? CRUD ??? ??????. ? ?? ??? ???? Dexie? ?? ???? ??????. ?????? ???? ??, ?? ?? ? ??? ??? ???? ?? ???? ??? ??????.

????? IndexEddb? ?? ???? ?? ???? ??? ? ????? ?? ?? ??? ??? ????.

? ??? IndexEdDB ? ????? ? ????? ?? ???? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!