Question

我现在尝试在每次用户点击按钮时切换颜色，并在localStorage中保存背景颜色。我已经尝试了几种选择，但直到现在我才开始工作。任何人都可以解决这个问题吗？谢谢你

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage Background Colour Changer</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

</head>
<body>


<script type="text/javascript">
    if (localStorage.getItem('background') !== null) {
        getColour = localStorage.background;
        $('.btn-secondmenu').css('background', getColour);
    }
    
    $('.btn-secondmenu').click(function() {
        if (getColour == 'blue') {
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'red');
            localStorage.setItem('background', 'red');
        } else {
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'blue');
            localStorage.setItem('background', 'blue');
        }
    });
</script>
<button class="btn-secondmenu">Button</button>
</body>
</html>

＆＃13;

Answer 1

Plnkr

HTML：

<button class="btn-secondmenu">Button</button>

JavaScript的：

// Add your javascript here
$(function() {
    if (localStorage.getItem('background') !== null)
    {
        getColour = localStorage.background;
        $('.btn-secondmenu').css('background', getColour);
    }
    else
    {
        getColour = 'green';
    }


    $('.btn-secondmenu').click(function() {
        if(getColour == 'blue')
        {
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'red');
            localStorage.setItem('background', 'red');
        }
        else
        {
            getColour = 'blue';
            localStorage.removeItem('background');
            $('.btn-secondmenu').css('background', 'blue');
            localStorage.setItem('background', 'blue');
        }
    });
});

Answer 2

JS Fiddle遇到localStorage问题。这是JS Bin。

问题是，您没有正确设置变量getColour。按下按钮时，您实际上并没有更新它。

此外，当您尝试为其设置事件侦听器时，未加载该按钮。使用jQuery时将代码包装在$(document).ready()中。

JS ：

$(document).ready(function() {
  var getColour;
  if (localStorage.getItem('background') !== null) {
    getColour = localStorage.background;
    $('.btn-secondmenu').css('background-color', getColour);
  }

  $('.btn-secondmenu').on('click', function() {
    if (getColour == 'blue') {
      getColour = 'red';
      $('.btn-secondmenu').css('background-color', 'red');
      localStorage.setItem('background', 'red');
    } else {
      getColour = 'blue';
      $('.btn-secondmenu').css('background-color', 'blue');
      localStorage.setItem('background', 'blue');
    }
  });
});

HTML ：

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button class="btn-secondmenu">Button</button>

修改：根据要求，每个页面的背景都不同。

JS ：

$(document).ready(function () { var getColourKey = 'background-' + window.location.search.match(/ID=(\d+)/)[1]; var getColour; if (localStorage.getItem(getColourKey) !== null) { getColour = localStorage.getItem(getColourKey); $('.btn-secondmenu').css('background-color', getColour); } $('.btn-secondmenu').on('click', function () { if (getColour == 'blue') { getColour = 'red'; $('.btn-secondmenu').css('background-color', 'red'); localStorage.setItem(getColourKey, 'red'); } else { getColour = 'blue'; $('.btn-secondmenu').css('background-color', 'blue'); localStorage.setItem(getColourKey, 'blue'); } }); });

Answer 3

您只需要更改

getColour = localStorage.background;

到

getColour = localStorage.getItem('background');

Answer 4

您在设置实际按钮之前设置了事件监听器。

将脚本放在按钮后面或使用document.ready

$(function() {
    // your code here
}

或使用.on方法。

$(document).on('click', '.btn-secondmenu', function() {
    // Code
})

在localStorage中保存按钮背景颜色

4 个答案: