为何select选择框选中选项后内容为空？sessionStorage存储问题排查

问题根源 #

你的代码里change事件的处理逻辑存在关键错误：

state.value = window.sessionStorage.setItem("state", this.value);

sessionStorage.setItem()方法的返回值是undefined，你把这个undefined赋值给了state.value，相当于强制清空了选择框的选中值，所以选择框会变成空白。

修复后的代码 #

只需要移除不必要的赋值操作，保留存储逻辑即可：

let state = document.querySelector("#state");

// 页面加载时从sessionStorage恢复选中状态
if (window.sessionStorage.getItem("state")) {
    state.value = window.sessionStorage.getItem("state");
}

// 选项改变时，仅将选中值存入sessionStorage
state.addEventListener("change", function () {
    window.sessionStorage.setItem("state", this.value);
});

补充说明 #

当用户选择新选项时，浏览器已经自动将state.value更新为选中选项的value，你不需要手动赋值。只需要把这个已更新的值存入sessionStorage，就能完成需求，同时避免选择框空白的问题。

内容的提问来源于stack exchange，提问作者abdou