我需要检索一个变量的值，该变量将用户在下拉列表中选择的选项存储在本地存储中，以便在其他地方使用它。
这是代码，下拉列表中列出了从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>
这是因为第一次加载页面时，localStorage.getItem('userSelectedYear')等于null(尚未设置(。只有在触发更改事件时才会设置它。你可以通过给userSelectedYearStorage一个默认值来解决这个问题，比如
// userSelectedYear defaults to 0
var userSelectedYearStorage = localStorage.getItem('userSelectedYear') ?? userSelectedYear;
只有当页面加载您身体的onload事件时，最后一个console.log才会读取，如果您从下拉列表中触发该事件，则该console.log永远不会读取。