Einleitung
Webdatenbanken sind neu in HTML5. Webdatenbanken werden im Browser eines Nutzers gehostet und beibehalten. Dadurch, dass Entwickler Anwendungen mit umfangreichen Abfragefunktionen erstellen können, wird eine neue Art von Webanwendungen entstehen, die sowohl online als auch offline arbeiten können.
Der Beispielcode in diesem Artikel zeigt, wie Sie einen sehr einfachen To-Do-Listen-Manager erstellen. Sie erhalten einen Überblick über einige Funktionen, die in HTML5 verfügbar sind.
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 Web Database-Unterstützung nutzen, verwenden Sie die Asynchronous API. Die Asynchronous API ist ein nicht blockierendes System und erhält daher keine Daten über Rückgabewerte, sondern an eine definierte Callback-Funktion.
Die Webdatenbankunterstützung über HTML erfolgt transaktional. SQL-Anweisungen können nicht außerhalb einer Transaktion ausgeführt werden.
Es gibt zwei Arten von Transaktionen: Lese-/Schreibtransaktionen (transaction()) und schreibgeschützte Transaktionen (readTransaction()). Beachten Sie, dass mit Lese-/Schreibtransaktionen die gesamte Datenbank gesperrt wird.
Schritt 1: Datenbank öffnen
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 festlegen.
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: Tabelle erstellen
Sie können eine Tabelle nur erstellen, indem Sie einen SQL-Statemen vom Typ 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 erstellt.
Die Tabelle heißt „todo“ und hat drei Spalten.
- ID: Spalte mit inkrementeller sequenzieller ID
- todo - eine Textspalte, die den Textkörper des Elements enthält.
- added_on: Zeitpunkt, zu dem die Aufgabe 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: Daten in eine Tabelle einfügen
Wir erstellen einen To-Do-Listen-Manager, daher müssen wir To-Do-Elemente zur Datenbank hinzufügen.
Es wird eine Transaktion erstellt. Innerhalb dieser Transaktion wird ein INSERT-Vorgang für die To-do-Tabelle ausgeführt.
Für „executeSql“ sind mehrere Parameter erforderlich: der auszuführende SQL-Code und die Parameterwerte zum Binden der Abfrage.
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
Jetzt, da sich die Daten in der Datenbank befinden, benötigen Sie eine Funktion, die die Daten zurückholt. In Chrome verwenden Webdatenbanken SQLite-SELECT-Standardabfragen.
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 in diesem Beispiel verwendeten Befehle asynchron sind. Daher werden die Daten nicht von der Transaktion oder demexecuteSql-Aufruf zurückgegeben. Die Ergebnisse werden an den Erfolgs-Callback übergeben.
Schritt 4a: Daten aus einer Tabelle rendern
Sobald die Daten aus der Tabelle abgerufen wurden, wird die Methode "loadTodoItems" aufgerufen.
Der onSuccess-Callback nimmt zwei Parameter an. Das erste ist die Transaktion der Abfrage und das zweite der Ergebnissatz. Es ist ziemlich einfach, über die Daten hinweg zu iterieren:
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 "<li>" + row.todo +
" [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" +
row.ID +");\'>Delete</a>]</li>";
}
Dieser Methodenaufruf bewirkt, dass die Aufgabenliste in ein DOM-Element namens "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 auf einen Blick
Wenn die Seite geladen ist, öffnen Sie die Datenbank, erstellen Sie die Tabelle (falls erforderlich) und rendern Sie alle To-do-Elemente, die sich bereits in der Datenbank befinden.
....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
<body onload="init();">
Dafür ist eine Funktion erforderlich, mit der die Daten aus dem DOM genommen werden. Rufen Sie dazu die Methode „html5rocks.webdb.addTodo“ auf.
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}