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>
Hola.
Cómo se puede hacer un backup y restauración de db con indexeddb?
Hola Julio, en realidad la base de datos la guardas en el navegador que el cliente usa, cómo harías con una cookie, y pierde un poco el sentido hacerle backup, y en el caso de querer hacerlo habría que implementarlo aparte, como una exportación o importación de datos. Aquí tienes un método en GitHub https://github.com/Polarisation/indexeddb-export-import
Un saludo!!