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.

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.

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);
        
    });
});