如何使用SessionStorage保存音频混音器滑块的音量值？

以下是修改后的完整代码，可实现刷新页面后保留滑块位置的功能：

完整代码 #

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

// 页面加载完成后恢复滑块值
document.addEventListener('DOMContentLoaded', () => {
    loadSliderValues();
});

function onSliderChanged(slider) {
    // 发送音量设置请求
    wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`);
    // 保存当前滑块值到SessionStorage
    saveSliderValue(slider.id, slider.value);
}

// 保存单个滑块值到SessionStorage
function saveSliderValue(trackId, value) {
    // 先读取已保存的所有滑块数据
    let sliderValues = JSON.parse(sessionStorage.getItem('sliderVolumes')) || {};
    // 更新当前滑块的值
    sliderValues[trackId] = value;
    // 存回SessionStorage
    sessionStorage.setItem('sliderVolumes', JSON.stringify(sliderValues));
}

// 加载保存的滑块值并设置到对应控件
function loadSliderValues() {
    let sliderValues = JSON.parse(sessionStorage.getItem('sliderVolumes'));
    if (!sliderValues) return;
    
    // 遍历所有保存的音轨ID，找到对应的滑块并设置值
    Object.keys(sliderValues).forEach(trackId => {
        const slider = document.getElementById(trackId);
        if (slider) {
            slider.value = sliderValues[trackId];
            // 同步设置混音器音量，确保页面加载后音量和滑块一致
            wwr_req(`SET/TRACK/${trackId}/VOL/${sliderValues[trackId]}`);
        }
    });
}
</script>

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

关键说明 #

• 保存逻辑：每次滑块变动时，先从SessionStorage读取已有的音量数据（无数据则初始化空对象），更新当前音轨的音量值后，用JSON.stringify转成字符串存回，可同时保存所有音轨的音量设置。
• 加载逻辑：页面加载完成时，读取SessionStorage里的音量数据，遍历每个音轨ID，找到对应滑块控件并设置其值，同时调用wwr_req同步混音器音量，保证滑块位置与实际音量一致。
• 兼容性：SessionStorage是浏览器原生API，无需额外依赖，支持HTML5的浏览器均可使用。

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