什么事件最适合检索会话存储值

Question

我正在尝试使用会话存储来保存浏览器上滑块的值。在页面重新加载时，我一直显示默认的0.5。剧本看起来不错，我想知道是否使用了"；改变"；举办活动并不是最好的方式。

jsfiddle：https://jsfiddle.net/q8c4d32f/14/

// With JQuery
$("#ex6").slider({
tooltip: "hide"
});
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
let set = sessionStorage.setItem("slider", slideEvt.value);
});
$("#ex6").on("change", function(changeEvt) {
let get = sessionStorage.getItem("slider");
});

div{
margin-top: 15px;
margin-left: 15px;
}

<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css"
integrity="sha512-SZgE3m1he0aEF3tIxxnz/3mXu/u/wlMNxQSnE0Cni9j/O8Gs+TjM9tm1NX34nRQ7GiLwUEzwuE3Wv2FLz2667w=="
crossorigin="anonymous" />

<!--Importing Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"
integrity="sha512-f0VlzJbcEB6KiW8ZVtL+5HWPDyW1+nJEjguZ5IVnSQkvZbwBt2RfCBY0CBO1PsMAqxxrG4Di6TfsCPP3ZRwKpA=="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>

<div>
<input id="ex6" type="text" data-slider-min="0.0" data-slider-max="1.0" data-slider-step=".1" data-slider-value="0.5"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">0.5</span></span>
</div>

Answer 1

在检索会话存储后，初始化文档中的滑块。

$(document).ready(function(){
let get = sessionStorage.getItem("slider") || 0.5 // If there is no session storage, use 0.5
console.log(get);

$("#ex6").slider({
tooltip: "hide",
value: get
});
$("#ex6SliderVal").text(get);
})

你的Fiddle更新