如何使用sessionStorage实现页面刷新后保留滑块（range input）位置

你可以通过sessionStorage实现这个需求，分两步改代码就行：

1. 滑块变化时保存值到sessionStorage #

修改你的onSliderChanged函数，每次滑块变动时，把当前值存到sessionStorage里，用滑块的id作为唯一标识，避免和其他滑块冲突：

function onSliderChanged(slider) {
  // 保留原有的请求逻辑
  wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`);
  // 新增：将当前滑块值存入sessionStorage
  sessionStorage.setItem(`slider_${slider.id}`, slider.value);
}

2. 页面加载时恢复滑块值 #

添加一个初始化函数，页面加载完成后，遍历所有滑块，从sessionStorage读取之前保存的值并设置回去：

// 页面加载完成后执行初始化操作
window.addEventListener('load', function() {
  // 获取页面中所有range类型的滑块
  const sliders = document.querySelectorAll('input[type="range"]');
  sliders.forEach(slider => {
    // 根据滑块id读取对应的保存值
    const savedValue = sessionStorage.getItem(`slider_${slider.id}`);
    // 如果存在保存的值，就设置给滑块
    if (savedValue !== null) {
      slider.value = savedValue;
      // 可选：如果需要让后端同步恢复后的值，可调用wwr_req
      wwr_req(`SET/TRACK/${slider.id}/VOL/${savedValue}`);
    }
  });
});

完整修改后的代码示例 #

<script src="main.js"></script>
<script type="text/javascript">
wwr_start();

// 滑块变动时保存值
function onSliderChanged(slider) {
  wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`);
  sessionStorage.setItem(`slider_${slider.id}`, slider.value);
}

// 页面加载时恢复滑块值
window.addEventListener('load', function() {
  const sliders = document.querySelectorAll('input[type="range"]');
  sliders.forEach(slider => {
    const savedValue = sessionStorage.getItem(`slider_${slider.id}`);
    if (savedValue !== null) {
      slider.value = savedValue;
      // 可选：同步到后端
      wwr_req(`SET/TRACK/${slider.id}/VOL/${savedValue}`);
    }
  });
});
</script>

<label class="drx"> Stax </label>
<input type="range" min="0" max="3" value="1" step="any" id="3" oninput="onSliderChanged(this)">

额外说明 #

• 确保40个滑块的id都是唯一的，否则保存和读取值会出现混乱。
• sessionStorage是会话级存储，关闭浏览器窗口后数据会清空；如果需要永久保存（关闭浏览器再打开仍保留），可以把代码里的sessionStorage替换成localStorage，用法完全一致。

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