El uso de localStorage permite guardar datos de la aplicación de forma local en los archivos temporales del navegador. Estos datos pueden ser recuperados en otro momento (incluso otro día) para seguir trabajando con ellos.
Hay dos tipos de almacenamiento que únicamente se diferencian por el tiempo que son capaces de guardar los datos en el sistema:
Los métodos para trabajar con los dos tipos son los mismos, y las opciones disponibles también son las mismas para los dos. Lo único que cambia es la forma de llamarlos, en un caso será sessionStorage.método(...) y en otro localStorage.método(...).
El nombre introducido en el siguiente input queda guardado de manera que la próxima vez que accedadmos a la página ya se mostrará en la línea inferior:
Al pulsar enviar se ejecuta la siguiente función:
function recogeDatos() {
let nombre = document.getElementById('txt_nombre').value;
localStorage.setItem('nombreuser', nombre);
localStorage.setItem('autor','yo');
}
Esta función solo guarda el dato en memoria (junto a otro dato de ejemplo, el autor), pero no lo muestra en pantalla. Sólo lo hemos almacenado para poder trabajar con él.
Para mostrarlo podemos hacer algo así:
function leerDatos() {
let nombre = localStorage.getItem('nombreuser');
document.getElementById('out_nombre').textContent = nombre;
}
Dato almacenado:
Otras dos formas equivalentes de definir el dato a almacenar son:
localStorage.nombreuser= nombre;
localStorage['nombreuser'] = nombre;
Hacen exáctamente lo mismo que setItem(). Pero se recomienda usar esta última forma.
También hay que recordar que podemos usar los datos almacenados directamente en la aplicación si depender de la interaccción del usuario, usando la propiepdad window.onload, por ejemplo, que nos permitirá acceder a la información tan pronto como la página esté cargada.
En este caso una vez definido el dato nombreuser lo mostraremos directamente en pantalla al cargar la página con la siguiente instrucción:
window.onload = leerDatos;
Los datos guardados en el almacenamiento pueden ser sobreescritos por nuevos valores, o pueden ser eliminados de la memoria. Tenemos dos métodos para eliminar información, el primero borra elementos específicos del almacenamiento y el segundo borra todo el almacén a la vez.
Si queremos eliminar una propiedad usaremos removeItem():
localStorage.removeItem('nombreuser');
Y si queremos eliminar todo el almacenamiento usaremos clear():
localStorage.clear()
Además de guardar datos o propiedades individuales, también podemos guardar todo un objeto de datos en JavaScript para poder usarlo posteriormente. Esto hace que podamos tener gran cantidad de información diponible para nuestra aplicación sin tener que depender del servidor en todo momento.
Para esto es necesario recordar que storage solo guarda texto como cadenas (string), y que no permite trabajar con los objetos directamente si no los parseamos primero. Esto significa que cualquier objeto que queramos guardar en el almacén lo tendremos que convertir primero en cadena de texto, y que posteriormente cuando queramos usarlo en la aplicación habrá que parsearlo como objeto primero.
Para hacer esto usamos los métodos JSON de javaScript:
Dado el siguiente objeto:
let objeto = {
nombre_reunion: 'Cena Fin de Curso',
fecha_reunion: ,
asistentes: ['Homer', 'Bart', 'Lisa'],
}
Lo podemos almacenar así:
localStorage.setItem('reunion', JSON.stringify(objeto))
Y lo podemos volver a usar como código así:
let objeto = JSON.parse(localStorage.getItem('reunion'))
El siguiente botón recupera datos del objeto y los muestra a continuación
Con esta función:
function recuperaObjeto() {
let objeto = JSON.parse(localStorage.getItem('reunion'));
let evento = objeto.nombre_reunion;
let fecha = objeto.fecha_reunion;
let asistentes = objeto.asistentes;
document.getElementById('parseado').innerHTML= `<p>Reunión: ${evento}</p><p>Fecha:${fecha}</p><p>Asitentes:${asistentes}</p>`;
}