lab/code.html at main · SE4CPS/lab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<meta charset="utf-8">
<title>IndexedDB Furniture Demo</title>
<script>
const dbOpen = indexedDB.open("furnitureDB", 1);

// Create store on first run
dbOpen.onupgradeneeded = function (e) {
  e.target.result.createObjectStore("items", { keyPath: "id", autoIncrement: true });
};

dbOpen.onsuccess = async function (e) {
  const db = e.target.result;

  // Helper: read/write transaction
  function rw(fn) {
    return new Promise(function (ok, er) {
      const tx = db.transaction("items", "readwrite");
      fn(tx.objectStore("items"));
      tx.oncomplete = ok;
      tx.onerror = function () { er(tx.error); };
    });
  }

  // Helper: get all items
  function all() {
    return new Promise(function (ok) {
      const out = [];
      const cur = db.transaction("items").objectStore("items").openCursor();

      cur.onsuccess = function () {
        let c = cur.result;
        if (c) {
          out.push(c.value);
          c.continue();
        } else {
          console.log("ALL:", out);
          ok(out);
        }
      };
    });
  }

  // --- CRUD demo ---
  await rw(function (s) {
    s.add({ name: "Chair", price: 49, stock: 10 });
    s.add({ name: "Table", price: 129, stock: 5 });
    s.add({ name: "Sofa",  price: 499, stock: 2 });
  });

  let items = await all();              // READ

  items[0].price = 59;                  // UPDATE first item
  await rw(function (s) {
    s.put(items[0]);
  });

  await rw(function (s) {
    s.delete(items[1].id);
  });                                   // DELETE second item

  await rw(function (s) {
    s.add({ name: "Lamp", price: 35, stock: 20 });
  });                                   // CREATE new item

  await all();                          // Final state
  console.log("CRUD demo complete.");
};

dbOpen.onerror = function (e) {
  console.error("DB open error:", e.target.error);
};
</script>