Introduzione
I database web sono una novità in HTML5. I database web sono ospitati e mantenuti nel browser di un utente. Consentendo agli sviluppatori di creare applicazioni con funzionalità di query avanzate, si prevede che emerga una nuova generazione di applicazioni web in grado di funzionare online e offline.
Il codice di esempio in questo articolo mostra come creare un gestore di elenchi di cose da fare molto semplice. Si tratta di un tour 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 = {};
Asincrone e transazionale
Nella maggior parte dei casi in cui utilizzi il supporto del database web, utilizzerai l'API asincrona. L'API asincrona è un sistema non bloccante e, come tale, non riceve i dati tramite valori restituiti, ma li riceve in una funzione di callback definita.
Il supporto del 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 transazioni di lettura/scrittura bloccheranno l'intero database.
Passaggio 1: Apertura del database
Il database deve essere aperto 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 un'istruzione SQL CREATE TABLE all'interno di una transazione.
Abbiamo definito una funzione che creerà una tabella nell'evento onload del body. Se la tabella non esiste già, ne verrà creata una.
La tabella si chiama todo e ha 3 colonne.
- ID: una colonna ID sequenziale crescente
- todo: una colonna di testo che corrisponde al corpo dell'elemento
- added_on: l'ora in cui è stato creato l'elemento della lista di cose da fare
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: Aggiunta di dati a una tabella
Stiamo creando un gestore di elenchi di cose da fare, quindi è molto importante che possiamo aggiungere elementi al database.
Viene creata una transazione, all'interno della quale viene eseguito un INSERT nella tabella todo.
executeSql accetta 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 di dati da una tabella
Ora che i dati sono nel database, hai bisogno di una funzione che li recuperi. In Chrome, Webdatabase utilizza 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, pertanto, i dati non vengono restituiti dalla transazione o dalla chiamata executeSql. I risultati vengono trasmessi al callback success.
Passaggio 4a. Visualizzazione dei dati di una tabella
Una volta recuperati i dati dalla tabella, verrà chiamato il metodo loadTodoItems.
Il callback onSuccess accetta due parametri. Il primo è la transazione della query e il secondo è il set di risultati. È abbastanza semplice eseguire l'iterazione sui 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 di cose da fare viene visualizzato in un elemento DOM chiamato "todoItems".
Passaggio 5: Eliminazione di 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: Collegamento di tutti gli elementi
Quando la pagina viene caricata, apri il database e crea la tabella (se necessario) e visualizza gli elementi della lista di cose da fare 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 estragga i dati dal DOM, quindi chiama il metodo html5rocks.webdb.addTodo
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}