Einführung
Web-Datenbanken sind neu in HTML5. Webdatenbanken werden im Browser eines Nutzers gehostet und gespeichert. Durch die Möglichkeit, Anwendungen mit umfangreichen Abfragefunktionen zu erstellen, soll eine neue Generation von Webanwendungen entstehen, die online und offline funktionieren.
Der Beispielcode in diesem Artikel zeigt, wie Sie einen sehr einfachen Aufgabenlisten-Manager erstellen. Es handelt sich um einen sehr allgemeinen Überblick über 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 Web Database-Unterstützung verwenden, nutzen Sie die asynchrone API. Die asynchrone API ist ein nicht blockierendes System. Daher werden keine Daten über Rückgabewerte abgerufen, sondern an eine definierte Callback-Funktion übergeben.
Die Unterstützung von Web Database über HTML ist transaktional. SQL-Anweisungen können nicht außerhalb einer Transaktion ausgeführt werden.
Es gibt zwei Arten von Transaktionen: Lese-/Schreibtransaktionen (transaction()) und Nur-Lese-Transaktionen (readTransaction()). Bei Lese-/Schreibtransaktionen wird die gesamte Datenbank gesperrt.
Schritt 1: Datenbank öffnen
Die Datenbank muss geöffnet werden, bevor darauf 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: Tabelle erstellen
Sie können eine Tabelle nur erstellen, indem Sie eine CREATE TABLE-SQL-Anweisung innerhalb einer Transaktion ausführen.
Wir haben eine Funktion definiert, die beim Ereignis „onload“ des Body-Elements eine Tabelle erstellt. Wenn die Tabelle noch nicht vorhanden ist, wird sie erstellt.
Die Tabelle heißt „todo“ und hat drei Spalten.
- ID: Eine Spalte mit fortlaufenden sequenziellen IDs
- todo: eine Textspalte, die den Text des Elements enthält
- added_on: Die Uhrzeit, zu der das To-do-Element 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 entwickeln einen Aufgabenlistenmanager. Daher ist es sehr wichtig, dass wir Aufgaben in die Datenbank einfügen können.
Es wird eine Transaktion erstellt und innerhalb der Transaktion wird ein INSERT in die Tabelle „todo“ ausgeführt.
executeSql akzeptiert mehrere Parameter, die auszuführende SQL-Anweisung 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
Nachdem die Daten in der Datenbank sind, benötigen Sie eine Funktion, mit der Sie die Daten wieder abrufen können. In Chrome werden für Webdatabase standardmäßige SQLite-SELECT-Abfragen verwendet.
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
Alle in diesem Beispiel verwendeten Befehle sind asynchron. Die Daten werden daher nicht von der Transaktion oder dem executeSql-Aufruf zurückgegeben. Die Ergebnisse werden an den Success-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 hat zwei Parameter. Die erste ist die Transaktion der Anfrage und die zweite das Ergebnis-Set. Die Daten lassen sich ganz einfach 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 "<li>" + row.todo +
" [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" +
row.ID +");\'>Delete</a>]</li>";
}
Durch diesen Methodenaufruf wird die Aufgabenliste in ein DOM-Element namens „todoItems“ gerendert.
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
Wenn die Seite geladen wird, öffnen Sie die Datenbank und erstellen Sie die Tabelle (falls erforderlich). Rendern Sie alle To-do-Elemente, die sich möglicherweise bereits in der Datenbank befinden.
....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
<body onload="init();">
Es ist eine Funktion erforderlich, die die Daten aus dem DOM abruft. Rufen Sie dazu die Methode html5rocks.webdb.addTodo auf.
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}