Retrieve the value of a variable that stores in local storage the options chosen by users in a dropdown list

145
March 08, 2022, at 3:00 PM

I need to retrieve the value of a variable that stores in local storage the options chosen by users in a dropdown list in order to use it elsewhere.

This is the code, the dropdown has a list of years from 2020 to the current year.

I store the year in local storage on change and in Chrome Dev Tools you can see how the stored variable changes when other years are chosen from the dropdown.

So far so good. But when I try to retrieve the year in the userSelectedYearStorage variable the last console.log line won't show. What am I doing wrong? Thanks!

    <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>
Answer 1

That's because when the page is first loaded, localStorage.getItem('userSelectedYear') equals null (it is not yet set). It only gets set when the change event is triggered. You can fix this by giving userSelectedYearStorage a default value like so

// userSelectedYear defaults to 0
var userSelectedYearStorage = localStorage.getItem('userSelectedYear') ?? userSelectedYear;
Answer 2

The last console.log is reading only when the page load the onload event of your body then if you trigged the event from the dropdown this console.log is never read.

Rent Charter Buses Company
READ ALSO
Javascript function doesn&#39;t work when chrome auto-fill forms

Javascript function doesn't work when chrome auto-fill forms

I have a login form where, if the fields are filled with data, a javascript (jquery) adds a class to them

136
How to reset auto prefill URL after the page load?

How to reset auto prefill URL after the page load?

I would like to reset auto prefill URL after the page load because some of my menu will not work if there's is a URL on itIs this possible JQuery?

131
jQuery change doesn&#39;t work in bootstrap 5 tabs

jQuery change doesn't work in bootstrap 5 tabs

I add an input form in bootstrap 5 tabs like this:

97