Javascript nos proporciona dos objetos con los mismos metodos para poder leer y escribir datos del usuario en el navegador para su uso posterior.
Los datos que almacenemos mediante el objeto localStorage permanecerán indefinidamente en el navegador, sin importar si se cambia de página, o si el usuario abandona el sitio ya sea yendo a otro sitio web o directamente cerrando el navegador.
Por otro lado los datos que almacenemos mediante el objeto sessionStorage solo permanecerán en el navegador mientras se mantenga abierta la ventana/pestaña donde se crearon.
Los datos a guardar en el almacenamiento local deben estar en formato de cadena de texto y deben ir en pares, un nombre para el dato y su contenido.
| Método/Propiedad | Descripción | |
|---|---|---|
| localStorage.setItem(nombre, contenino) | Añade un elemento al almacenamiento local | |
| localStorage.getItem(nombre) | Recupera un elemento del alamcenamiento local | |
| localStorage.removeItem(nombre) | Elimina un elemento del almacenamiento local | |
| localStorage.clear() | Elimina todos los elementos en el almacenamiento local | |
| localStorage.key(n) | Permite recuperar el nombre de un elemento en el almacenamiento local al proporcionarle un indice numérico | |
| localStorage.length | Propiedad para consultar el número de elementos almacenados en el objeto | |
Ejemplo practico del almacenamiento local
Uno uso común que se le puede dar a esta característica de JS es el de almacenar la configuración que el usuario haya hecho en la interfaz de nuestra aplicación, para así evitar que el usuario tenga que volver a configurar todo de nuevo con cada visita.
A continuación te mostrare un código de ejemplo donde se guarda la configuración de los menús abiertos o cerrados por el usuario.
Mantener menús abiertos o cerrados por el usuario
En el siguiente ejemplo tenemos un ménu dentro de un contenedor con Id '#contenedor_1' con un funcionamiento muy simple.
Al pulsar un botón añadiremos o quitaremos la clase abierto al contenedor del menu.
Al añadir la clase aplicaremos la propiedad CSS display: none; y al eliminar la clase restauraremos los estilos por defecto.
- Elemento 1
- Elemento 2
- Elemento 3
Estructura HTML del menu y su contenedor
<button type="button" id="toogle_contenedor_1">Cambiar estado del menú</button>
<div id="contenedor_1">
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</div>Estilos CSS para abrir/cerrar menú
#contenedor_1.cerrado{
display: none;
}Código JavaScript del ejemplo
document.addEventListener('DOMContentLoaded', ()=>{
//Apuntamos al contenedor que deseamos abrir/cerrar
let contenedor_1 = document.querySelector('#contenedor_1');
//Consultamos el estado del elemento almacenado y lo representamos visualmente
if( localStorage.getItem('contenedor_1_status') == 'cerrado' ){
contenedor_1.classList.add('cerrado');
}
//Apuntamos al botón que permitirá cambiar el estado del contenedor al hacer click
let toogle_contenedor_1 = document.querySelector('#toogle_contenedor_1');
toogle_contenedor_1.addEventListener('click', function(){
let oldStatus, newStatus;
//Determinamos el estado actual y el antiguo consultando directamente en el elemento
if( contenedor_1.classList.contains('cerrado') ){
oldStatus = 'cerrado';
newStatus = 'abierto';
}else{
oldStatus = 'abierto';
newStatus = 'cerrado';
}
//1) Removemos estilos del estado anterior
contenedor_1.classList.remove(oldStatus);
//2) Añadimos estilos con el nuevo estado
contenedor_1.classList.add(newStatus);
//3) Guardamos el nuevo estado en el almacenamiento local
localStorage.setItem('contenedor_1_status', newStatus);
});
});