No estoy seguro de por qué mi almacenamiento local no funciona. Cuando se carga la página, carga la función almacenada (), que debería ser el valor almacenado para mi función de alternancia, que cambia la página de clara a oscura.
HTML:
<body onload="stored()"> <label for="ID_HERE" class="toggle-switchy" > <input checked type="checkbox" name="server" id="ID_HERE"> <span class="toggle" onclick="toggle()" id="saveDarkLight"></span> <span class="switch"></span> </span> </label>(Se eliminó el archivo javascript antiguo porque no me permitía publicar demasiado código)
HTML actualizado:
<label for="ID_HERE" class="toggle-switchy" > <input checked onclick="toggle()" type="checkbox" name="server" id="ID_HERE"> <span class="toggle" id="saveDarkLight"></span> <span class="switch"></span> </span> </label>JS actualizado:
function stored() { var storedValue = localStorage.getItem("server"); if(storedValue){ lightmode() document.getElementById("ID_HERE").checked = true; }else{ darkmode() document.getElementById("ID_HERE").checked = false; } } function toggle() { if(document.getElementById("ID_HERE").checked) { lightmode() var input = document.getElementById("ID_HERE"); localStorage.setItem("server", input.checked); } else { darkmode() var input = document.getElementById("ID_HERE"); localStorage.setItem("server", input.checked); } }Es input.value y no input.val() en JavaScript vainilla. Y su onclick debería estar en la entrada. Yo lo haría así:
function stored() { var storedValue = localStorage.getItem("server"); if(sotoredValue){ lightmode() document.getElementById("ID_HERE").checked = true; }else{ darkmode() document.getElementById("ID_HERE").checked = false; } } function toggle() { if(document.getElementById("ID_HERE").checked) { lightmode() var input = document.getElementById("ID_HERE"); localStorage.setItem("server", input.checked); } else { darkmode() var input = document.getElementById("ID_HERE"); localStorage.setItem("server", input.checked); } } function darkmode() { const bodyChanges = document.querySelectorAll('.margin_body'); for (let i = 0; i < bodyChanges.length; i++) { bodyChanges[i].style.background = '#0c0a0f'; } } function lightmode() { const bodyChanges = document.querySelectorAll('.margin_body'); for (let i = 0; i < bodyChanges.length; i++) { bodyChanges[i].style.background = 'white'; } } <body onload="stored()"> <label for="ID_HERE" class="toggle-switchy" > <input checked onclick="toggle()" name="server" id="ID_HERE"> </label> </body>