Question

我正在尝试允许网络访问者更改网页背景的颜色，并确保在刷新页面时，他们的背景颜色首选项仍显示在页面上。

我尝试过使用localStorage.setItem（）但它似乎没有用。有什么建议吗？

HTML

<button id="changeColorButton" class="btn-secondmenu">Button</button>
<select name="colors" id="changeColorSelect">
   <option value="red">Red</option>
   <option value="green" selected="selected">Green</option>
   <option value="yellow">Yellow</option>
   <option value="black">Black</option>
</select>

JS

$('#changeColorButton').click(function() {
    var color = $('#changeColorSelect').val();
    console.log(color)
    $('body').css("background-color",color);
    localStorage.setItem('background', $(this).val());
});

感谢任何帮助，谢谢！

Answer 1

这一行

localStorage.setItem('background', $(this).val());

将保存按钮元素的值 $('#changeColorButton')，如果有

取而代之的是

localStorage.setItem('background', color);

Answer 2

在您的代码中，您正在使用click事件侦听器函数

$('#changeColorButton').click(function() {...}

在你点击事件监听器this是指按钮而不是changeColorSelect选择。这就是本地存储无法存储颜色的原因。

相反，这将起作用

$('#changeColorButton').click(function() {
    var color = $('#changeColorSelect').val();
    console.log(color)
    $('body').css("background-color",color);
    localStorage.setItem('background', color);
});

希望它有所帮助！

如何使用javascript保存背景颜色？

2 个答案: