Loading ...

Introduzione a IndexedDB in Javascript

Introduzione a IndexedDB in Javascript

Oggi vediamo un'altra API per l'archiviazione dei dati in un browser per Javascript: IndexedDB!

Queste le caratteristiche:

  • database di tipo NoSQL; quindi non useremo le classiche istruzioni SQL
  • i dati verranno registrati in formato key:value
  • è compatibile con quasi tutti i browsers
  • è object-oriented
  • è quasi totalmente asincrono
  • non ci sono limitazioni di memoria per un oggetto

Ci sono altre caratteristiche, ma andremmo troppo nel particolare.

Qui sotto potete vedere un esempio completo:

  • nella prima parte creiamo un db e aggiungiamo alcuni dati
  • sotto ci sono delle funzioni richiamate dai tasti visibili nella pagina

Ecco il codice:

<!DOCTYPE html>
<html>
    <head>
        <title>Test IndexedDB</title>
        <script type="text/javascript">
            // TEST PER COMPATIBILITÀ BROWSER
            window.indexedDB = window.indexedDB ||
                    window.mozIndexedDB ||
                    window.webkitIndexedDB ||
                    window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||
                    window.webkitIDBTransaction ||
                    window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||
                    window.webkitIDBKeyRange ||
                    window.msIDBKeyRange;
            if (!window.indexedDB) {
                window.alert("IndexedDB non supportato");
            }

            // DATI INIZIALI
            const dominiData = [
                {id: "01", name: "mattepuffo",
                    domain: "https://www.mattepuffo.com"},
                {id: "02", name: "hardstyleitalia",
                    domain: "https://www.hardstyleitalia.com/blog/"}
            ];
            var db;
            var request = window.indexedDB.open("test_db", 1);

            request.onerror = function (event) {
                console.log("Errore: " + event.target.errorCode);
            };

            request.onsuccess = function (event) {
                db = event.target.result;
                console.log("OK: " + db);
            };

            request.onupgradeneeded = function (event) {
                var thisDb = event.target.result;
                var objectStore = thisDb.createObjectStore("domini", {keyPath: "id"});

                for (var i in dominiData) {
                    objectStore.add(dominiData[i]);
                }
            }

            // FUNZIONI
            function read(id) {
                var transaction = db.transaction(["domini"]);
                var objectStore = transaction.objectStore("domini");
                var request = objectStore.get(id);

                request.onerror = function (event) {
                    alert("Record inesistente!");
                };

                request.onsuccess = function (event) {
                    if (request.result) {
                        alert("Nome: " + request.result.name + ", Dominio: " +
                                request.result.domain);
                    } else {
                        alert("Errore recupero record " + id);
                    }
                };
            }

            function readAll() {
                var objectStore = db.transaction("domini").objectStore("domini");

                objectStore.openCursor().onsuccess = function (event) {
                    var cursor = event.target.result;

                    if (cursor) {
                        alert("Nome per id " + cursor.key + ": " + cursor.value.name +
                                ", Dominio: " + cursor.value.domain);
                        cursor.continue();
                    }
                };
            }

            function add(id, nome, dominio) {
                var request = db.transaction(["domini"], "readwrite")
                        .objectStore("domini")
                        .add({id: id, name: nome, domain: dominio});

                request.onsuccess = function (event) {
                    alert("Aggiunto il dominio " + nome);
                };

                request.onerror = function (event) {
                    alert("Impossibile aggiungere il dominio " + nome);
                }
            }

            function remove(id) {
                var request = db.transaction(["domini"], "readwrite")
                        .objectStore("domini")
                        .delete(id);

                request.onsuccess = function (event) {
                    alert("Il dominio " + id + " è stato rimosso!");
                };
            }
        </script>
    </head>
    <body>
        <button onclick="read('02');">Leggi record 2</button>
        <button onclick="readAll();">Leggi tutti i records</button>
        <button onclick="read('03');">Leggi record 3</button>
        <button onclick="add('03', 'youngboard', 'https://www.youngboard.it/');">
            Aggiungi il record 3
        </button>
        <button onclick="read('03');">Leggi record 3</button>
        <button onclick="remove('03');">Cancella record 3 </button>
        <button onclick="readAll();">Leggi tutti i records</button>
    </body>
</html>

Ho messo alcuni commenti, ma la cosa migliore è fare qualche test.

Non è proprio intuitivo il suo utilizzo; un pò di studio va fatto.

Ma è comunque una buona alternativa se avete parecchi dati da registrare.

Enjoy!