如何用JavaScript实现下拉选框选中状态的会话级持久化？

当然可以！你要的效果完全可以通过浏览器的sessionStorage来实现——它专门用于在浏览器会话期间存储数据，关闭标签页或浏览器窗口后数据就会自动清除，和PHP Session的会话级特性完美契合。

下面是具体的实现步骤和代码示例：

1. 监听下拉选框的选择变化，保存选中值到sessionStorage #

当用户选择不同选项时，我们把选中的值存入sessionStorage：

// 获取目标下拉选框元素
const filterSelect = document.querySelector('.filter-with');

// 监听选项变更事件
filterSelect.addEventListener('change', function() {
  // 将当前选中的值存入sessionStorage，键名可以自定义
  sessionStorage.setItem('selectedFilter', this.value);
});

2. 页面加载时恢复之前的选中状态 #

每次页面加载完成后，我们从sessionStorage中取出之前保存的值，把它设置为下拉选框的选中值：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const filterSelect = document.querySelector('.filter-with');
  // 从sessionStorage中读取保存的选中值
  const savedValue = sessionStorage.getItem('selectedFilter');
  
  // 如果存在保存的值，就设置为当前选中项
  if (savedValue) {
    filterSelect.value = savedValue;
  }
});

配套的示例HTML（你的原代码） #

<select name="filter-with" class="filter-with">
  <option value="">Select . . .</option>
  <option value="demo">Session</option>
  <!-- 这里可以添加更多选项 -->
</select>

补充说明 #

• 为什么选sessionStorage而不是localStorage？
  localStorage是持久化存储，即使关闭浏览器数据也会保留，不符合你要的“会话结束即失效”的需求；而sessionStorage的生命周期刚好和浏览器会话一致，标签页关闭就清除数据，完全匹配你的要求。
• 跨标签页的注意点：
  sessionStorage是标签页独立的，每个标签页的存储数据互不干扰。如果你的场景需要多个标签页共享同一个选中状态，可能需要结合Broadcast Channel API或者其他方法，但大多数单标签使用的场景，sessionStorage已经足够好用。
• 空值处理：
  如果用户选择了默认的空选项（<option value="">Select . . .</option>），sessionStorage会存入空字符串，页面加载时也会正确选中这个默认选项，逻辑完全通顺。

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