¡Saludos! Estoy desarrollando un nuevo blog y, como sugiere el título, intento almacenar mi hoja de estilo del modo oscuro en localStorage en todas las páginas web. Actualmente, si un usuario selecciona el Modo oscuro, pero luego actualiza la página o se vincula a otra página web, el sitio vuelve al Modo claro nuevamente. Quiero que recuerde la elección de modo del usuario (claro u oscuro). Este es mi código JavaScript actual:
function swapStylesheet(sheet) { document.getElementById('swap').setAttribute('href', sheet); }¿Cómo podría aplicar localStorage a este código para que el navegador recuerde qué hoja de estilo eligió el usuario?
¡Muchas gracias!
Es bastante fácil usar la API localStorage.
Para guardar en el almacenamiento local:
function swapStylesheet(sheet) { document.getElementById('swap').setAttribute('href', sheet); localStorage.setItem('swap', sheet); }Para recuperar del almacenamiento local:
function getLocalStorageSwapStyle(){ let style=localStorage.getItem('swap'); swapStyleSheet(style); } Puede llamar a getLocalStorageSwapStyle cuando lo desee. Por ejemplo: en la carga de la página o algún evento determinado.
Puede encontrar más información sobre la API localStorage aquí: mdn