Einfache TODO Liste mit HTML5 WebDatabases

Am 18. November 2010 gab das W3C bekannt, dass die Web SQL-Datenbank eine veraltete Spezifikation ist. Dies ist eine Empfehlung für Webentwickler, die Technologie nicht mehr effektiv zu verwenden, da die Spezifikation keine neuen Updates erhält und Browser-Anbieter nicht aufgefordert werden, diese Technologie zu unterstützen. Viele gängige Browser, darunter Chrome, Safari, Opera und fast alle Webkit-basierten Mobilgeräte, unterstützen WebSQL und werden wahrscheinlich auf absehbare Zeit weiterhin Unterstützung bieten.

Einführung

Webdatenbanken sind neu in HTML5. Webdatenbanken werden im Browser eines Benutzers gehostet und beibehalten. Durch die Möglichkeit für Entwickler, Anwendungen mit umfangreichen Abfragefunktionen zu erstellen, soll eine neue Generation von Webanwendungen entstehen, die online und offline arbeiten können.

Dieses Tutorial ist auch mit "IndexedDB" , der Ersatz-Offline-Speichertechnologie, geschrieben.

Der Beispielcode in diesem Artikel zeigt, wie Sie einen sehr einfachen Aufgabenlisten-Manager erstellen. Es ist eine sehr hochrangige Tour durch einige der in HTML5 verfügbaren Funktionen.

Voraussetzungen

In diesem Beispiel wird ein Namespace verwendet, um die Datenbanklogik zu kapseln.

var html5rocks = {};
html5rocks.webdb = {};

Asynchron und transaktional

In den meisten Fällen, in denen Sie die Unterstützung für Webdatenbanken verwenden, verwenden Sie die asynchrone API . Die asynchrone API ist ein nicht blockierendes System und erhält als solches keine Daten über Rückgabewerte, sondern Daten, die an eine definierte Rückruffunktion geliefert werden.

Die Unterstützung der Webdatenbank über HTML erfolgt transaktional. Es ist nicht möglich, SQL-Anweisungen außerhalb einer Transaktion auszuführen. Es gibt zwei Arten von Transaktionen: Lese- / Schreibtransaktionen ( transaction () ) und schreibgeschützte Transaktionen ( readTransaction () ). Bitte beachten Sie, dass durch Lesen / Schreiben die gesamte Datenbank gesperrt wird.

Schritt 1. Öffnen Sie die Datenbank

Die Datenbank muss geöffnet werden, bevor auf sie zugegriffen werden kann. Sie müssen den Namen, die Version, die Beschreibung und die Größe der Datenbank definieren.

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
  var dbSize = 5 * 1024 * 1024; // 5MB
  html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
  alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
  // re-render the data.
  // loadTodoItems is defined in Step 4a
  html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

Schritt 2. Erstellen einer Tabelle

Sie können eine Tabelle nur erstellen, indem Sie eine SQL-Anweisung CREATE TABLE innerhalb einer Transaktion ausführen .

Wir haben eine Funktion definiert, die eine Tabelle im Body-Onload-Ereignis erstellt. Wenn die Tabelle noch nicht vorhanden ist, wird eine Tabelle erstellt. Die Tabelle heißt todo und hat 3 Spalten.

• ID - eine inkrementierende sequentielle ID-Spalte
• todo - eine Textspalte, die den Hauptteil des Elements darstellt
• addiert_on - die Zeit, zu der das Aufgabenelement erstellt wurde

html5rocks.webdb.createTable = function() {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                  "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
  });
}

Schritt 3. Hinzufügen von Daten zu einer Tabelle

Wir erstellen einen Aufgabenlisten-Manager, daher ist es ziemlich wichtig, dass wir Aufgaben-Elemente zur Datenbank hinzufügen können.

Eine Transaktion wird erstellt, innerhalb der Transaktion wird ein INSERT in die ToDo-Tabelle ausgeführt.

executeSql benötigt mehrere Parameter, die auszuführende SQL und die Parameterwerte, um die Abfrage zu binden.

html5rocks.webdb.addTodo = function(todoText) {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx){
    var addedOn = new Date();
    tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
        [todoText, addedOn],
        html5rocks.webdb.onSuccess,
        html5rocks.webdb.onError);
   });
}

Schritt 4. Daten aus einer Tabelle auswählen

Nachdem sich die Daten in der Datenbank befinden, benötigen Sie eine Funktion, mit der die Daten wieder ausgegeben werden. In Chrome verwenden Webdatabase Standard-SQLite-SELECT-Abfragen.

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM todo", [], renderFunc,
        html5rocks.webdb.onError);
  });
}

Beachten Sie, dass alle diese in diesem Beispiel verwendeten Befehle asynchron sind und daher die Daten nicht von der Transaktion oder dem Aufruf von executeSql zurückgegeben werden. Die Ergebnisse werden an den Erfolgsrückruf weitergeleitet.

Schritt 4a. Daten aus einer Tabelle rendern

Sobald die Daten aus der Tabelle abgerufen wurden, wird die loadTodoItems-Methode aufgerufen.

Der onSuccess-Rückruf akzeptiert zwei Parameter. Die erste ist die Transaktion der Abfrage und die zweite ist die Ergebnismenge. Es ist ziemlich einfach, die Daten zu durchlaufen:

function loadTodoItems(tx, rs) {
  var rowOutput = "";
  var todoItems = document.getElementById("todoItems");
  for (var i=0; i < rs.rows.length; i++) {
    rowOutput += renderTodo(rs.rows.item(i));
  }

  todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
  return "
" + row.todo + 
         " [Delete]
";
}

Dieser Methodenaufruf bewirkt, dass die Aufgabenliste in ein DOM-Element mit dem Namen "todoItems" gerendert wird.

Schritt 5. Daten aus einer Tabelle löschen

html5rocks.webdb.deleteTodo = function(id) {
  var db = html5rocks.webdb.db;
  db.transaction(function(tx){
    tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
        html5rocks.webdb.onSuccess,
        html5rocks.webdb.onError);
    });
}

Schritt 6. Alles anschließen

Öffnen Sie beim Laden der Seite die Datenbank, erstellen Sie die Tabelle (falls erforderlich) und rendern Sie alle Aufgabenelemente, die sich möglicherweise bereits in der Datenbank befinden.

....
function init() {
  html5rocks.webdb.open();
  html5rocks.webdb.createTable();
  html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

Eine Funktion, die die Daten aus dem DOM entfernt, wird benötigt. Rufen Sie daher die Methode html5rocks.webdb.addTodo auf

function addTodo() {
  var todo = document.getElementById("todo");
  html5rocks.webdb.addTodo(todo.value);
  todo.value = "";
}