Estoy tratando de hacer que el tema del modo oscuro/claro en mi sitio se almacene localmente para que no se desactive cada vez que se abre una nueva página o se actualiza el sitio. ¿Dónde debo poner el localStorage. ? ¿O todo está mal?
const checkbox = document.getElementById('checkbox'); checkbox.addEventListener('change',()=> { // change theme of website document.body.classList.toggle('dark'); });si está utilizando vainilla javascript, es decir, en su html, ha cargado su secuencia de comandos como se muestra a continuación
<html> ... <script src='/to/scripts.js'></script> </body> </html>Luego puede agregar dos funciones, una que las establece en localStorage y la otra que las lee y las hace accesibles.
al actualizar, la función de actualización establece el nuevo valor para el tema, al leer, la función de lectura lee el valor almacenado incluso después de actualizar/recargar como se muestra a continuación
<html> .... <script> //for setting const toggleTheme = () => { if(localStorage.getItem('theme') === 'dark'){ localStorage.setItem('theme','light') }else{ localStorage.setItem('theme','dark') } } //for reading const theme = () => localStorage.getItem('theme') || 'light' </script> <script src='/to/scripts.js'></script> </body> </html>Editar (la última respuesta no resolvió el problema)
Creo que puede usar el evento DOMContentLoaded para configurar el tema desde localStorage , cuando la casilla de verificación cambia, configura el tema seleccionado en el almacenamiento. De esta manera, cuando la página se vuelva a cargar, buscará el tema y lo configurará, si el tema no está configurado, se iluminará de manera predeterminada.
Aquí hay una muestra:
document.addEventListener("DOMContentLoaded", function(event) { const theme = localStorage.getItem('theme'); if(theme === undefined) theme = 'light'; document.body.classList.add(theme); }); const checkbox = document.getElementById('checkbox'); checkbox.addEventListener('change',(e) => { const theme = e.target.checked ? 'dark' : 'light'; localStorage.setItem(theme); document.body.classList.add(theme); });