IndexedDB

(mini) Einführung

in die

IndexedDB API

Übersicht

Storage für
- JSON Objekte
- Bilder
- Videos
- "Blobs"
NoSQL-Datenbank
Größe (fast) unbeschränkt
Transaction basiert
Prä-Promise API
→ eventbasiert
→ asynchron

DB erstellen / öffnen

let mydb;
const req = window.indexedDB
    .open("myDbName", 1);
req.onerror = console.error;
req.onsuccess = 
    () => mydb = req.result;
req.upgradeneeded = (e)=>{
  var db = e.target.result;
  var s1 = db.createObjectStore(
    "projects", {keyPath:'id'});
  var s2 = db.createObjectStore(
    "users", {keyPath:'email'});
};

Zweiter Parameter von open definiert die Schema-Version. Ändert sich diese (z.B. von 0 auf 1) wird upgradeneeded aufgerufen.

Daten ergänzen

function addRow(
    mydb, storage, data) {
 return new Promise((ok,no) => {
  let t = mydb.transaction(
    storage, "readwrite");
  let s = t.objectStore(storage);
  let r = s.add(data);
  r.onsuccess = ok;
  r.onerror = no;
 });
}

Kapseln in Promise vereinfacht den Zugriff.
Änderung in nächstem Idle-Zyklus des Browsers gespeichert.

Daten abfragen

function getUser(mydb, email) {
 return new Promise(found => {
  const t = mydb.transaction(
    "users", "readonly");
  const s = t.objectStore("users");
  const req = s.get(email);
  req.onsuccess = () =>
    found(req.result);
 });
}

Abfragen mit get erfolgen auf den keyPath.

Daten aktualisieren

function setName(mydb, email, name)
 return getUser(mydb, email)
    .then(data => {
  return new Promise((ok,no) => {
   data.name = name;
   const t = mydb.transaction(
     "users", "readonly");
   const s = t.objectStore("users");
   const r = s.put(data);
   r.onsuccess = ok;
  })
 });
}

Beim Ändern wird immer der gesamte Datensatz ersetzt. Oft wird der alte Datensatz gelesen, geändert und zurückgeschrieben.

Daten löschen

function deleteUser(mydb, email) {
 return new Promise((ok, fail) => {
  const t = mydb.transaction(
    "users", "readwrite");
  const s = t.objectStore("users");
  const r = s.delete(email);
  r.onsuccess = ok;
  r.onerror = fail;
 });
}

Wie bei get erfolgen das Löschen über den keyPath.

Sonstiges

Mehr Details sind in der MDN unter "IndexedDB API" zu finden.
Relationen zwischen den "Stores" müssen selbst programmiert werden.
Bei kleinen Daten reicht oft localstorage.
Offiziell sind "Wrapper" empfohlen. Es gibt Wrapper, die die Promise API nutzen.