English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Corso di base HTML5

HTML5 API

HTML5 Media

HTML5 Grafica

Database Locale HTML5

Il Web SQL Database di HTML5 (database locale html5) è davvero invitante, quando scopri che puoi utilizzare query di ricerca come quelle di MySQL per operare sul database locale, trovi che è piuttosto interessante. Oggi, scopriamo insieme l'API Web SQL Database di HTML 5: openDatabase, transaction, executeSql.

Database Web SQL HTML5

WebSQL è un modulo indipendente in front-end, è uno dei metodi di archiviazione Web, lo vediamo spesso durante il debug, ma non viene utilizzato molto.

Se sei un programmatore backend Web, dovrebbe essere facile capire le operazioni SQL.

Il database Web SQL può funzionare nei browser più recenti Safari, Chrome e Opera.

Metodi core

Di seguito sono riportati i tre metodi core definiti nella specifica:

  • openDatabase: questo metodo utilizza un database esistente o crea un nuovo database per creare un oggetto database.

  • transaction: questo metodo ci permette di controllare una transazione e di eseguire un commit o un rollback in base a questa situazione.

  • executeSql: questo metodo viene utilizzato per eseguire query SQL reali.

Apertura del database

Possiamo utilizzare la funzione openDatabase() per aprire un database esistente, se il database non esiste, verrà creato un nuovo database, come segue:

var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);

La descrizione dei cinque parametri della funzione openDatabase():

  • Nome del database

  • Versione

  • Testo di descrizione

  • Dimensione del database

  • Callback di creazione

Il quinto parametro, la callback di creazione verrà chiamata dopo la creazione del database.

Eseguire l'operazione di query

Eseguire l'operazione utilizzando la funzione database.transaction():

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {　　
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
</script>
</body>
</html>

Dopo l'esecuzione della dichiarazione sopra, verrà creata una tabella chiamata LOGS nel database 'testdb'.

Inserimento dei dati

Dopo aver eseguito la dichiarazione di creazione della tabella sopra, possiamo inserire alcuni dati:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
});
</script>
</body>
</html>

Possiamo anche utilizzare valori dinamici per inserire dati:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {　　
　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?,?)', [e_id, e_log]);
});
</script>
</body>
</html>

In questo esempio, e_id e e_log sono variabili esterne, executeSql mappa ogni voce dell'array di parametri a "?".

Lettura dei dati

Di seguito sono riportati alcuni esempi su come leggere i dati già esistenti nel database:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
　
db.transaction(function(tx) {
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
});
　
db.transaction(function(tx) {
　　　tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
　　　　　　var len = results.rows.length, i;
　　　　　　msg = "<p>Numero di record di ricerca: " + len + "</p>";
　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　
　　　　　　for (i = 0; i < len; i++){
　　　　　　　　　alert(results.rows.item(i).log);
　　　　　　}
　　　　
　　　}, null);
});
</script>
</body>
</html>

Esempio completo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
var msg;
　
db.transaction(function(tx) {
　　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
　　　　msg = '<p>La tabella è stata creata e sono stati inseriti due record.</p>';
　　　　document.querySelector('#status').innerHTML = msg;
});
　
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
　　　　var len = results.rows.length, i;
　　　　msg = "<p>Numero di record di ricerca: " + len + "</p>";
　　　　document.querySelector('#status').innerHTML +=    msg;
　
　　　　for (i = 0; i < len; i++){
　　　　　　　　msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
　　　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　}
}, null);
});
</script>
<div id="status" name="status">Informazioni di Stato</div>
</body>
</html>
Testa e guarda ‹/›

I risultati dell'esempio sopra riportato sono illustrati nella figura seguente:

Eliminazione dei record

Il formato utilizzato per eliminare i record è il seguente:

db.transaction(function(tx) {
　　　　tx.executeSql('DELETE FROM LOGS WHERE id=1');
});

Eliminare i dati specifici di id può essere dinamico:

　　　　
});

db.transaction(function(tx) {
　　　　tx.executeSql('UPDATE LOGS SET log=\
});

　　　　tx.executeSql('UPDATE LOGS SET log=\
});

Esempio completo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
var msg;
　
　db.transaction(function(tx) {
　　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, \
　　　　tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, \
　　　　msg = '<p>La tabella è stata creata e sono stati inseriti due record.</p>';
　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　　tx.executeSql('DELETE FROM LOGS WHERE id=1');
　　　　　　msg = '<p>Eliminazione del record con id 1.</p>';
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　　tx.executeSql('UPDATE LOGS SET log=\
　　　　　　msg = '<p>Aggiornamento del record con id 2.</p>';
　　　　　　document.querySelector('#status').innerHTML = msg;
　});
　
　db.transaction(function(tx) {
　　　　tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
　　　　　　　var len = results.rows.length, i;
　　　　　　　msg = "<p>Numero di record di ricerca: " + len + "</p>";
　　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　　　　
　　　　　　　for (i = 0; i < len; i++){
　　　　　　　　　　msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
　　　　　　　　　　document.querySelector('#status').innerHTML +=    msg;
　　　　　　　}
　　　　}, null);
　});
</script>
<div id="status" name="status">Informazioni di Stato</div>
</body>
</html>
Testa e guarda ‹/›

I risultati dell'esempio sopra riportato sono illustrati nella figura seguente:

Cache delle Applicazioni HTML5Memoria Client HTML5