IndexedDB: Almacenamiento en cliente de datos en HTML

Mediante javascript podemos almacenar datos directamente en el cliente, mediante esta opción podemos crear un crud para guardar los datos y que nos los muestre sin que se borren en el caso de que actualicemos.

A continuación está el código de ejemplo, mediante el cual puedes añadir registros a la base de datos y borrarlos.

Es un código bastante simple, que guarda en este caso nombre apellidos y dni de una persona.  Y puede ampliarse para guardar lo que se necesite.

<html>
    <head>
        <meta charset="UTF-8">
        <title>IndexedDB: Base de datos local con HTML5</title>
        <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
        <script type="text/javascript">
            var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
            var dataBase = null;

            function startDB() {

                dataBase = indexedDB.open("basededatos", 1);

                dataBase.onupgradeneeded = function (e) {

                    var active = dataBase.result;
                    var object = active.createObjectStore("usuarios", {keyPath: 'id', autoIncrement: true});
                    object.createIndex('by_nombre', 'nombre', {unique: false});
                    object.createIndex('by_dni', 'dni', {unique: true});

                };

                dataBase.onsuccess = function (e) {
                    //    alert('Database loaded');
                    loadAll();
                };

                dataBase.onerror = function (e) {
                    alert('Error cargando la base de datos');
                };

            }

            function add() {
                var active = dataBase.result;
                var data = active.transaction(["usuarios"], "readwrite");
                var object = data.objectStore("usuarios");

                var request = object.put({
                    dni: document.querySelector("#dni").value,
                    nombre: document.querySelector("#nombre").value,
                    apellido: document.querySelector("#apellido").value
                });

                request.onerror = function (e) {
                    alert(request.error.nombre + '\n\n' + request.error.message);
                };

                data.oncomplete = function (e) {

                    document.querySelector('#dni').value = '';
                    document.querySelector('#nombre').value = '';
                    document.querySelector('#apellido').value = '';
                    alert('Object successfully added');
                    loadAll();
                };

            }

            function load(id) {
                var active = dataBase.result;
                var data = active.transaction(["usuarios"], "readonly");
                var object = data.objectStore("usuarios");

                var request = object.get(parseInt(id));

                request.onsuccess = function () {
                    var result = request.result;

                    if (result !== undefined) {
                        alert("ID: " + result.id + "\n\
                               DNI " + result.dni + "\n\
                               nombre: " + result.nombre + "\n\
                               apellido: " + result.apellido);
                    }
                };
            }

            function deleteitem(id) {
                var active = dataBase.result;
                var data = active.transaction(["usuarios"], "readwrite");
                var object = data.objectStore("usuarios");

                var request = object.get(parseInt(id));

                request.onsuccess = function () {
                    var result = request.result;

                    if (result !== undefined) {
                      object.delete(parseInt(id));
                      loadAll();
                    }
                };
            }

            function loadByDni(dni) {
                var active = dataBase.result;
                var data = active.transaction(["usuarios"], "readonly");
                var object = data.objectStore("usuarios");
                var index = object.index("by_dni");
                var request = index.get(String(dni));

                request.onsuccess = function () {
                    var result = request.result;

                    if (result !== undefined) {
                        alert("ID: " + result.id + "\n\
                               DNI " + result.dni + "\n\
                               nombre: " + result.nombre + "\n\
                               apellido: " + result.apellido);
                    }
                };
            }

            function loadAll() {
                var active = dataBase.result;
                var data = active.transaction(["usuarios"], "readonly");
                var object = data.objectStore("usuarios");

                var elements = [];

                object.openCursor().onsuccess = function (e) {

                    var result = e.target.result;

                    if (result === null) {
                        return;
                    }

                    elements.push(result.value);
                    result.continue();

                };

                data.oncomplete = function () {

                    var outerHTML = '';

                    for (var key in elements) {

                        outerHTML += '\n\
                        <tr>\n\
                            <td>' + elements[key].dni + '</td>\n\
                            <td>' + elements[key].nombre + '</td>\n\
                            <td>' + elements[key].apellido + '</td>\n\
                            <td>\n\
                                <button type="button" class="btn btn-outline-primary" onclick="load(' + elements[key].id + ')">Detalles</button>\n\
                                <button type="button" class="btn btn-outline-primary" onclick="deleteitem(' + elements[key].id + ')">Borrar</button>\n\
                            </td>\n\
                        </tr>';

                    }

                    elements = [];
                    document.querySelector("#elementsList").innerHTML = outerHTML;
                };
            }

            function loadAllBynombre() {
                var active = dataBase.result;
                var data = active.transaction(["usuarios"], "readonly");
                var object = data.objectStore("usuarios");
                var index = object.index("by_nombre");

                var elements = [];

                index.openCursor().onsuccess = function (e) {

                    var result = e.target.result;

                    if (result === null) {
                        return;
                    }

                    elements.push(result.value);
                    result.continue();

                };

                data.oncomplete = function () {

                    var outerHTML = '';

                    for (var key in elements) {

                        outerHTML += '\n\
                        <tr>\n\
                            <td>' + elements[key].dni + '</td>\n\
                            <td>' + elements[key].nombre + '</td>\n\
                            <td>' + elements[key].apellido + '</td>\n\
                            <td>\n\
                                <button type="button" class="btn btn-outline-primary" onclick="load(' + elements[key].id + ')">Detalles</button>\n\
                                <button type="button" class="btn btn-outline-primary" onclick="deleteitem(' + elements[key].id + ')">Borrar</button>\n\
                            </td>\n\
                        </tr>';

                    }

                    elements = [];
                    document.querySelector("#elementsList").innerHTML = outerHTML;
                };
            }

        </script>
    </head>
    <body onload="startDB();">
        <br></br>
        <div class="container">
        <h4> Introducir un nuevo usuario </h4>
        <input type="text" id="dni" placeholder="DNI" />
        <input type="text" id="nombre" placeholder="Nombre" />
        <input type="text" id="apellido" placeholder="Apellidos" />
        <button type="button" onclick="add();">Añadir</button>
        <hr>
                <div id="elements">
                    <table class="table table-hover">
                        <caption>Lista de Usuarios</caption>
                        <thead>
                            <tr>
                                <th>DNI</th>
                                <th>nombre</th>
                                <th>Apellidos</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="elementsList">
                            <tr>
                                <td colspan="4">No existen datos para mostrar</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
        <button type="button" onclick="loadAllBynombre();" class="btn btn-primary">Ordenar por nombre</button>
        </div>
    </body>
</html>

Y nos cargaría la siguiente vista en el navegador:

 

2 comentarios en “IndexedDB: Almacenamiento en cliente de datos en HTML”

Deja un comentario