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

【问题标题】：Retrieve the value of a variable that stores in local storage the options chosen by users in a dropdown list检索在本地存储中存储用户在下拉列表中选择的选项的变量的值
【发布时间】：2022-02-06 22:36:20
【问题描述】：

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

这是代码，下拉列表中列出了从 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>

【问题讨论】：

标签： javascript jquery local-storage global-variables

【解决方案1】：

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

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

【讨论】：

非常感谢您的回复！我已经尝试了您的代码，这就是发生的情况：在 Chrome 开发工具中，您可以在本地存储中看到 userSelectedYear 的值在选择不同年份时如何变化。到目前为止，一切都很好。但是当我在控制台中尝试 userSelectedYearStorage 时，它的值不会改变，它会保持页面加载时的值。在 Firefox 工具控制台中，userSelectedYearStorage 返回 0。发生了什么？
这正是它在控制台中的工作方式。默认情况下，变量在 JavaScript 中不是响应式的。如果想在控制台中获取新的值，可以输入localStorage.getItem('userSelectedYear')或者userSelectedYear。
太好了，非常感谢！

【解决方案2】：

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

【讨论】：