Necesito recuperar el valor de una variable que almacena en el almacenamiento local las opciones elegidas por los usuarios en una lista desplegable para usarla en otro lugar.
Este es el código, el menú desplegable tiene una lista de años desde 2020 hasta el año actual.
Guardo el año en el almacenamiento local al cambiar y en Chrome Dev Tools puedes ver cómo cambia la variable almacenada cuando se eligen otros años del menú desplegable.
Hasta aquí todo bien. Pero cuando intento recuperar el año en la variable userSelectedYearStorage, la última línea de console.log no se muestra. ¿Qué estoy haciendo mal? ¡Gracias!
<body> <div id="app"> <select id="yearSelection"> <option value="0" selected>Select a year</option> </select> </div> <script> var yearSelection = document.getElementById("yearSelection"); var currentYear = new Date().getFullYear(); for (let y = 2020; y <= currentYear; y++) { var element = document.createElement("option"); element.textContent = y; element.value = y; yearSelection.appendChild(element); } var userSelectedYear = 0; $("#yearSelection").on("change", function () { userSelectedYear = this.value; console.log("userSelectedYear inside on change: " + userSelectedYear); localStorage.setItem("userSelectedYear", userSelectedYear); }); var userSelectedYearStorage = localStorage.getItem('userSelectedYear') //this line below won't be printed: console.log("userSelectedYear outside on change: " + userSelectedYearStorage); </script> </body>Esto se debe a que cuando la página se carga por primera vez, localStorage.getItem('userSelectedYear') es igual a null (aún no está configurado). Solo se establece cuando se activa el evento de cambio. Puede solucionar esto dando a userSelectedYearStorage un valor predeterminado como ese
// userSelectedYear defaults to 0 var userSelectedYearStorage = localStorage.getItem('userSelectedYear') ?? userSelectedYear;El último console.log se lee solo cuando la página carga el evento onload de su cuerpo, luego, si activó el evento desde el menú desplegable, este console.log nunca se lee.