Einführung
Webdatenbanken sind in HTML5 neu. Webdatenbanken werden im Browser eines Nutzers gehostet und gespeichert. Da Entwickler Anwendungen mit umfangreichen Abfragefunktionen erstellen können, wird es voraussichtlich eine neue Art von Webanwendungen geben, die online und offline funktionieren.
Der Beispielcode in diesem Artikel zeigt, wie Sie einen sehr einfachen Manager für To-do-Listen erstellen. Es ist ein sehr allgemeiner Überblick über einige der Funktionen, die in HTML5 verfügbar sind.
Voraussetzungen
In diesem Beispiel wird die Datenbanklogik in einem Namespace verpackt.
var html5rocks = {};
html5rocks.webdb = {};
Asynchron und transaktional
In den meisten Fällen, in denen Sie den Web-Datenbanksupport verwenden, verwenden Sie die Asynchrone API. Die asynchrone API ist ein nicht blockierendes System. Daher werden Daten nicht über Rückgabewerte, sondern über eine definierte Rückruffunktion empfangen.
Die Webdatenbankunterstützung über HTML ist transaktionsbasiert. Es ist nicht möglich, SQL-Anweisungen außerhalb einer Transaktion auszuführen.
Es gibt zwei Arten von Transaktionen: Lese-/Schreibtransaktionen (transaction()) und Lesetransaktionen (readTransaction()). Hinweis: 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 innerhalb einer Transaktion die SQL-Anweisung CREATE TABLE ausführen.
Wir haben eine Funktion definiert, die eine Tabelle im Body-Onload-Ereignis erstellt. Wenn die Tabelle noch nicht vorhanden ist, wird sie erstellt.
Die Tabelle heißt „todo“ und hat drei Spalten.
- ID: eine inkrementelle sequenzielle ID-Spalte
- todo: Textspalte, die den Textkörper 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 To-do-Listen-Manager. Daher ist es ziemlich wichtig, dass wir der Datenbank To-do-Elemente hinzufügen können.
Es wird eine Transaktion erstellt und innerhalb der Transaktion wird ein INSERT in die Tabelle „ToDo“ ausgeführt.
executeSql nimmt mehrere Parameter entgegen: den auszuführenden SQL-Code und die Parameterwerte, mit denen die Abfrage gebunden werden soll.
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 sie wieder abrufen können. In Chrome werden für Webdatenbanken 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);
});
}
Hinweis: Alle in diesem Beispiel verwendeten Befehle sind asynchron. Daher werden die Daten nicht von der Transaktion oder dem executeSql-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 hat zwei Parameter. Die erste ist die Transaktion der Abfrage und die zweite ist das Ergebnissatz. Es ist ziemlich einfach, die Daten 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>";
}
Durch diesen Methodenaufruf wird die To-do-Liste in einem 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 bei Bedarf die Tabelle. 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();">
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 = "";
}