LocalStorage noUiSlider 值 ||重要的！ : (

Question

我想将 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 知识有点少，所以如果您想向我解释任何事情，请像在和婴儿说话一样说话。确实。

Answer 1

您可以使用 localStorage APIs 来设置和获取项目：

首先，如果你想在本地存储中存储项目，只需使用集合 API:

localStorage.setItem('myValue', sliderValue[0]);

其中 myValue 是项目名称

其次，如果你想获取localStorage，只需使用get API:

localStorage.getItem('myValue');

Answer 2

给你解决方案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());
});

#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>

LocalStorage noUiSlider 值 ||重要的！ : (

LocalStorage noUiSlider values || Important! : (

html

javascript

jquery

jquery-ui-slider