如何在刷新时保存 slider 值 position（会话存储）

Question

所以这是我当前代码的简单版本

<script src="main.js"></script>
<script type="text/javascript">
wwr_start();
function onSliderChanged(slider) {
wwr_req(`SET/TRACK/${slider.id}/VOL/${slider.value}`);

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

所以我有大约 40 张幻灯片（范围输入），看起来像上面的代码。 但是每当我刷新页面时，slider 值都会恢复为默认值。 即使刷新页面，我如何保存 slider 值的最新 position？ 我尝试使用“sessionstorage”，但由于我在编码领域还很陌生，所以我真的不知道如何使用 function。

试图复制和粘贴其他人如何使用 sessionstorage 但无法采用我当前的代码

Answer 1

这是一个简单的示例，说明您如何：

• 在 window 加载（即浏览器已加载您的页面并准备就绪）时，它会将一个事件附加到 slider 并从 session 存储中检索 slider position（如果存在）。

• 如果值发生变化，它会更新 sessionStorage 变量。

您需要将其复制到您自己的项目中，因为由于跨端安全性，此示例可能无法在此处运行。

 window.onload = () => { const slider1 = document.getElementById('slider1'); // Attach listener to each slider slider1.addEventListener('input',storeSliderPosition); //retrieve value from sessionStorage if(sessionStorage.slider1) { //first check if a value exists slider1.value = sessionStorage.slider1; //if so then set the value of the slider console.log("The stored slider value is: "+sessionStorage.slider1); } } function storeSliderPosition(event) { const id = event.target.id; //get the id of the slider we're using sessionStorage[id] = event.target.value; //set the session storage value of the slider. Note sessionStorage['slider1'] is the same as sessionStorage.slider1 console.log(`The slider ${id} has changed and the new value is: ${sessionStorage[id]}`); }

 <input type="range" min="1" max="100" value="50" id="slider1">