A partir de HTML5 puedes guardar datos en una base de datos local usando solamente HTML/Javascript. Existe también almacenamiento por sesión.
Puedes echarle un vistazo a la documentación:
Aquí te dejo un ejemplo mínimo que muestra la forma de almacenar, leer y borrar datos usando localStorage
.
Se pueden hacer más cosas avanzadas, como configurar la BD para que funcione off-line, almacenar datos en tablas / columnas específicas, etc... es cuestión de explorar.
HTML:
<input id="myData" type="text" placeholder="Escriba los datos..." />
<br />
<button onclick="createData()">Crear</button>
<button onclick="readData()">Leer</button>
<button onclick="deleteData()">Borrar</button>
<hr />
<div id="info"></div>
JS:
//array para guardar los valores
var arrData = Array();
//Identificar el elemento input
var inputData = document.getElementById('myData');
//Crear datos en local storage
function createData() {
//Obtiene el valor actual del input
var strDataToSave = inputData.value;
if ((strDataToSave == null) || (strDataToSave == "")) {
document.getElementById('info').innerHTML = "El input está vacío.";
} else {
//Envía valor del input al array
arrData.push(strDataToSave);
//Limpia el input
inputData.value = "";
//Guarda el valor en el local storage llamado database agregando un espacio en blanco
window.localStorage.setItem("database", arrData.join(" "));
//Confirma en pantalla que los datos se guardaron
document.getElementById('info').innerHTML = "¡Datos guardados!";
//Limpia el mensaje de info después de 1 segundo
setTimeout(function() {
document.getElementById('info').innerHTML = "";
}, 1000);
}
}
// Leer datos
function readData() {
//Obtiene el valor del local storage "database" por llave (key)
if (window.localStorage.getItem("database") == null) {
document.getElementById('info').innerHTML = "¡No hay datos!";
} else {
document.getElementById('info').innerHTML =
window.localStorage.getItem("database");
}
}
//Borrar datos almacenados
function deleteData() {
//Limpia el storage
arrData = Array();
localStorage.clear("database");
//Imprimir mensaje
document.getElementById('info').innerHTML = "¡Datos borrados!";
}
CSS:
#info {
font-size: 1.5em;
color: red;
}