IndexedDB

by pw_we1

HTML

<button id="open">Öffnen</button><br>
<input id="id" placeholder="ID">
<input id="name" placeholder="Name">
<button id="save">Speichern</button><br>
<table>
<thead><tr><td>ID</td><td>Name</td></tr></thead>
<tbody id="tbody"></tbody>
</table>

CSS

table, td {
  border-collapse: collapse;
  border: 1px solid;
}

JavaScript

var db;
$("#open").click(function() {
  var req = indexedDB.open("myDB", 1);
  req.onupgradeneeded = function(event) {
    var mydb = event.target.result;
    mydb.createObjectStore("myStore", {keyPath: "id"});
  };
  req.onsuccess = function(event) {
    db = this.result;
    reload();
  };
})
$("#save").click(function() {
  var o = {
    id: $("#id").val(),
    name: $("#name").val(),
  };
  var transaction = db.transaction(["myStore"], "readwrite");
  var store = transaction.objectStore("myStore");
  store.add(o);
  reload();
})
function reload() {
  var transaction = db.transaction(["myStore"]);
  var store = transaction.objectStore("myStore");
  $("#tbody").empty();
  store.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
      $("#tbody").append(
        $("<tr>").append("<td>"+cursor.key+"</td>")
                 .append("<td>"+cursor.value.name+"</td>"));
      cursor.continue();
    }
  };
}