检索在本地存储中存储用户在下拉列表中选择的选项的变量的值

Question

我需要检索一个变量的值，该变量将用户在下拉列表中选择的选项存储在本地存储中，以便在其他地方使用它。

这是代码，下拉列表包含从 2020 年到当前年份的年份列表。

我将更改的年份存储在本地存储中，在 Chrome 开发工具中，您可以看到当从下拉列表中选择其他年份时存储的变量如何变化。

到目前为止一切顺利。但是当我尝试在 userSelectedYearStorage 变量中检索年份时，最后 console.log 行不会显示。我究竟做错了什么？谢谢！

    <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

最后一个 console.log 仅在页面加载您正文的 onload 事件时读取，然后如果您从下拉列表中触发该事件，则此 console.log 永远不会被读取。

Answer 2

那是因为第一次加载页面时，localStorage.getItem('userSelectedYear')等于null（尚未设置）。它仅在触发更改事件时设置。您可以通过给 userSelectedYearStorage 一个默认值来解决这个问题

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

检索在本地存储中存储用户在下拉列表中选择的选项的变量的值

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

javascript

jquery

global-variables

local-storage