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:
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!!