Skip to main content
2 de 2
se añadieron 172 caracteres en el cuerpo
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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.

VER DEMO EN JSFIDDLE

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;
}
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257