Introduzione
I database web sono una novità di HTML5. I database web sono ospitati e resi persistenti all'interno del browser dell'utente. Consentendo agli sviluppatori di creare applicazioni con ampie capacità di query, si prevede che emergerà una nuova gamma di applicazioni web in grado di funzionare sia online che offline.
Il codice di esempio riportato in questo articolo illustra come creare un gestore di elenchi di cose da fare molto semplice. con una presentazione di alto livello di alcune delle funzionalità disponibili in HTML5.
Prerequisiti
Questo esempio utilizza uno spazio dei nomi per incapsulare la logica del database.
var html5rocks = {};
html5rocks.webdb = {};
Asincroni e transazionali
Nella maggior parte dei casi in cui utilizzi il supporto di Web Database, utilizzerai l'API asincrona. L'API asincrona è un sistema non bloccante e, per questo motivo, non riceverà dati tramite valori restituiti, ma li invierà a una funzione di callback definita.
Il supporto dei database web tramite HTML è transazionale. Non è possibile eseguire istruzioni SQL al di fuori di una transazione.
Esistono due tipi di transazioni: transazioni di lettura/scrittura (transaction()) e transazioni di sola lettura (readTransaction()). Tieni presente che le operazioni di lettura/scrittura bloccheranno l'intero database.
Passaggio 1: Apertura del database
È necessario aprire il database prima di potervi accedere.
Devi definire il nome, la versione, la descrizione e le dimensioni del database.
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);
}
Passaggio 2: Creazione di una tabella
Puoi creare una tabella solo eseguendo uno statemen SQL CREATE TABLE all'interno di una transazione.
Abbiamo definito una funzione che crea una tabella nell'evento onload del corpo. Se la tabella non esiste già, ne verrà creata una.
La tabella è denominata "Cose da fare" e ha 3 colonne.
- ID - una colonna di ID sequenziale incrementale
- todo: una colonna di testo che costituisce il corpo dell'elemento
- add_on: l'ora in cui è stato creato l'elemento di promemoria
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)", []);
});
}
Passaggio 3: Aggiungere dati a una tabella
Stiamo creando un gestore di elenchi di cose da fare, quindi è piuttosto importante che possiamo aggiungere al database le voci delle cose da fare.
Viene creata una transazione, al suo interno viene eseguito un INSERT nella tabella delle cose da fare.
EseguiSql richiede diversi parametri, il codice SQL da eseguire e i valori dei parametri per associare la query.
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);
});
}
Passaggio 4: Selezione dei dati da una tabella
Ora che i dati sono nel database, hai bisogno di una funzione che li restituisca. In Chrome, i database Webdatabase utilizzano query SELECT SQLite standard.
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
Tieni presente che tutti questi comandi utilizzati in questo esempio sono asincroni e, di conseguenza, i dati non vengono restituiti dalla transazione o dalla chiamataExecuteSql. I risultati vengono trasmessi al callback di successo.
Passaggio 4a. Rendering dei dati da una tabella
Una volta che i dati sono stati recuperati dalla tabella, verrà chiamato il metodo loadTodoItems.
Il callback onSuccess richiede due parametri. La prima è la transazione della query e la seconda il set di risultati. È abbastanza semplice eseguire l'iterazione dei dati:
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>";
}
L'effetto di questa chiamata al metodo è che l'elenco delle cose da fare viene visualizzato in un elemento DOM chiamato "todoItems".
Passaggio 5: Eliminazione dei dati da una tabella
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);
});
}
Passaggio 6: Un po' di tutto
Quando la pagina viene caricata, apri il database e crea la tabella (se necessario) ed esegui il rendering di tutti gli elementi di promemoria che potrebbero essere già presenti nel database.
....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
<body onload="init();">
È necessaria una funzione che estrae i dati dal DOM, quindi richiama il metodo html5rocks.webdb.addTodo
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}