Loading ...

Introduzione a Web SQL Database in Javascript

Introduzione a Web SQL Database in Javascript

Web SQL Database è un API web per lo storage dei dati in formato database nel browser attraverso Javascript.

In sostanza si tratta di una delle varie API per lo storage dei dati nelle web application.

Al momento Firefox non è compatibile con questa API, in quanto ne sfrutta un'altra che vedremo prossimamente.

Ma può essere comunque utile conoscerla, in quanto è compatibile con Android e Safari (e quindi iOS).

Il suo utilizzo è molto semplice, in quanto condivide la stessa sintassi dei database che probabilmente già conoscete.

Qua sotto un esempio completo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test Web SQL</title>
        <script>
            // CREIAMO UN DATABASE PASSANDO QUESTI PARAMETRI:
            // nome database
            // versione
            // descrizione
            // dimensione
            var db = openDatabase('test_db', '1.0', 'Test Web SQL', 2 * 1024 * 1024);
            // INIZIAMO TRANSAZIONE PER EFFETTUARE OPERAZIONI
            db.transaction(function (tx) {
                // CREIAMO UNA TABELLA SE NON ESISTE
                tx.executeSql('CREATE TABLE IF NOT EXISTS test (id unique, text)');
                // INSERIAMO DUE RECORDS
                tx.executeSql('INSERT INTO test (id, text) VALUES (1, "matteo")');
                tx.executeSql('INSERT INTO test (id, text) VALUES (2, "sveva")');
            });

            db.transaction(function (tx) {
                // INIZIAMO TRANSAZIONE PER ESTRARRE I DATI
                tx.executeSql('SELECT * FROM test', [], function (tx, results) {
                    var len = results.rows.length, i;
                    document.querySelector('#count').innerHTML = len;
                    for (i = 0; i < len; i++) {
                        document.querySelector('#records').innerHTML += '<p>' + 
                                results.rows.item(i).text + '</p>';
                    }
                }, null);
            });
        </script>
    </head>
    <body>
        <div id="count"></div>
        <div id="records"></div>
    </body>
</html>

Vi ho commentato il codice, già di per se molto semplice.

Ovviamente sono supportate anche altre istruzioni SQL, come ad esempio:

tx.executeSql('DROP TABLE test');

Questa cancella la tabella.

Fate un pò di prove, e un pò di debug in console.

Enjoy!