Question

我在网站上创建了一个不透明层。我成功地使上层的不透明度适应范围输入。不透明度的值存储在localstorage中，因此在重新加载页面时它将保留。但是，每次重新加载页面时，范围输入的值都将重置。我想保持范围输入的值与重新加载之前的值相同。我知道我必须使用localstorage来保存范围输入的值，但我不知道如何。有人可以帮我吗？

这是我的HTML代码：

<div id="layer"></div>

<div id="BackGroundSlider">
      <input id="contrast" type="range" value="0" max="1" min="0" step="0.01" />
    </div>

这是我的css代码：

#layer {
  background-color:rgba(255,255,255,0);
  width: 100%;
  height: 100vh;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  opacity: 1;
  margin:0;
 }

#BackGroundSlider{
  z-index:0;
}

这是我的js代码：

$(document).ready(function() {

$("#layer").css('background-color', localStorage.getItem("#layer"));

$("#contrast").on('input', function() {
$('#layer').css('background-color', "rgba(255,255,255," + $(this).val() + 
     ")");
     var status = $("#layer").css('background-color');
     localStorage.setItem("#layer", status);
    });
});

Answer 1

一种方法是在更改时更新localstorage中的范围。然后你肯定在重新加载之前总是得到最后一个值。

$("#contrast").on('input', function() {
  ...
  var range = $(this).val();
  localStorage.setItem("range", range);
});

Answer 2

你几乎走在正确的轨道上。不确定问题是什么，因为你似乎有正确的想法。话虽如此，您的范围值存储在localStorage中，您可以访问它。我建议从整个范围来考虑这个问题 - 何时应该使用该值，例如e.t.c.

＆＃13;

$(document).ready(function() {

$("#layer").css('background-color', localStorage.getItem("#layer"));

$("#contrast").on('input', function() {
$('#layer').css('background-color', "rgba(255,255,255," + $(this).val() + 
     ")");
     var status = $("#layer").css('background-color');
     let rangeValue = $(this).val();
     localStorage.setItem("rangeValue", rangeValue);
     const currentRangeValue = localStorage.getItem("rangeValue");
     // use currentRangeValue
     
    });
});

＆＃13;

#layer {
  background-color:rgba(255,255,255,0);
  width: 100%;
  height: 100vh;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  opacity: 1;
  margin:0;
 }

#BackGroundSlider{
  z-index:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="layer"></div>

<div id="BackGroundSlider">
      <input id="contrast" type="range" value="0" max="1" min="0" step="0.01" />
    </div>

＆＃13;

如何在localstorage中存储<input type =“range”/>的值？

2 个答案: