我想将2个变量(?)值存储到本地存储,并在刷新网站时加载它们。
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [60, 600],
connect: true,
range: {
'min': 50,
'max': 700
}
});
var sliderValue = slider.noUiSlider.get();
var min = parseInt(sliderValue[0]); //Need to storage this value
var max = parseInt(sliderValue[1]); //Need to storage this value
console.log(Math.floor((Math.random() * (max-min)) + min));
#slider {
width: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>
<div id="slider">
</div>
!重要!我的js知识有点小,所以如果你想解释我什么,说话就像你在和宝宝说话。确实
答案 0 :(得分:1)
您可以使用localStorage API设置和获取项目:
首先,如果您想在localStorage中存储项目,只需使用set API:
localStorage.setItem('myValue', sliderValue[0]);
其中myValue是项目名称
其次,如果你想获得localStorage,只需使用get API:
localStorage.getItem('myValue');
答案 1 :(得分:1)
您可以使用解决方案https://jsfiddle.net/ozfpr1cn/1/
var slider = document.getElementById('slider');
var start;
if(localStorage.getItem('noUISlider') == null){
start = [60, 600];
}else{
start = $.map(localStorage.getItem('noUISlider').split(","), function(value){
return parseFloat(value, 10);
});
}
noUiSlider.create(slider, {
start: start,
connect: true,
range: {
'min': 50,
'max': 700
}
});
var sliderValue = slider.noUiSlider.get();
slider.noUiSlider.on('change', function(){
localStorage.setItem('noUISlider', slider.noUiSlider.get());
});
&#13;
#slider {
width: 400px;
}
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>
<div id="slider">
</div>
&#13;