Traté de guardar la posición del elemento de entrada usando localStorage. Guardé la posición de mi elemento de entrada y después de recargar la página puedo acceder a él, pero siempre está en la posición predeterminada después de la actualización de la página. (Valor verdadero/falso)
HTML:
<div class="switch"> <input type="checkbox" value="false" id="c1"> <label for="c1"><span></span></label> </div>JS:
const chk = document.getElementById('c1'); var storedPosition = localStorage.getItem('saved'); console.log("Saved input value: " + storedPosition); chk.addEventListener("change", () => { if(chk.value === "false"){ chk.value = "true"; console.log(chk.value); }else{ chk.value = "false"; console.log(chk.value); } localStorage.setItem('saved',chk.value); });Para ser claros, estoy creando una extensión de Chrome (página de opciones).
EDITAR:
const chk = document.getElementById('c1'); var storedPosition = localStorage.getItem('saved'); console.log("Saved input value: " + storedPosition); chk.value = storedPosition; //edited set different value chk.addEventListener("change", () => { if(chk.value === "false"){ chk.value = "true"; console.log(chk.value); }else{ chk.value = "false"; console.log(chk.value); } localStorage.setItem('saved',chk.value); });Principalmente, debe usar checked en lugar de value . Mientras que checked es el estado marcado (visual) de la entrada, el value es el valor que se publica.
También puede hacerlo más simple almacenando el valor en localStorage como el número "0" o "1", que se puede volver a convertir fácilmente en un valor booleano.
window.onload = function(){ const chk = document.getElementById('c1'); //REM: Changed "saved" to the id of the element //REM: Also in the change listener to make it more dynamic const storedPosition = localStorage.getItem(chk.id); console.log("Saved input value: " + !!+storedPosition); //REM: Use the property "checked" and not the "value" //REM: Be aware that the value is a string with either null, "0" or "1" //REM: which can be converted to a number (0 or 1) chk.checked = +storedPosition; //REM: Change event chk.addEventListener("change", () => { //REM: Use the property "checked" and not the "value" //REM: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox //REM: Store the boolean as a number to spare conversions localStorage.setItem(this.id, +this.checked); //REM: You can omit the rest, unless you want to post it /* if(chk.value === "false"){ chk.value = "true"; console.log(chk.value); }else{ chk.value = "false"; console.log(chk.value); } localStorage.setItem('saved',chk.value); */ }) }