Question

我正在尝试在单击按钮后在本地存储中保存背景颜色的更改，但在刷新窗口时不会保存。我忘记了什么吗？

$(".btn-secondmenu").click(function(){
   $(".btn-secondmenu").css('background-color', 'red');
        var status = $(".btn-secondmenu");
        localStorage.setItem(".btn-secondmenu", status);
    });

Answer 1

您需要将颜色设置为变量status。您当前的代码将$(".btn-secondmenu") - jQuery对象设置为localStorage。

$(".btn-secondmenu").css('background-color', localStorage.getItem(".btn-secondmenu"));  
//sets the color from localstorage on Dom ready - getItem().

$(".btn-secondmenu").click(function () {
    $(this).css('background-color', 'red');     //use *this* to set color for current button
    var status = $(".btn-secondmenu").css('background-color');  //assign color value to variable
    localStorage.setItem(".btn-secondmenu", status);
});

<强> Demo

Answer 2

localStorage项的值可以是任何值，但它会在内部转换为字符串。 您的status正在转换为字符串，因此其实际值未正确存储。

例如：

localStorage.setItem('hi', document.createElement('div'));
localStorage.getItem('hi'); // "[object HTMLDivElement]"

在你的情况下：

var status = $('.btn-secondmenu');
localStorage.setItem('.btn-secondmenu', status);
localStorage.getItem('.btn-secondmenu'); // "[object Object]"

要解决此问题，您可以改为存储实际颜色值，如下所示：

var btnSecondMenu = $('.btn-secondmenu'); 
btnSecondMenu.click(function () {
   btnSecondMenu.css('background-color', 'red');
   localStorage.setItem('.btn-secondmenu', 'red');
});

然后，您可以在页面加载时使用该值设置css背景颜色：

var storedBgColor = localStorage.getItem('.btn-secondmenu'); // "red"
if (storedBgColor) {
    $('.btn-secondmenu').css('background-color', storedBgColor);
} else {
    // set default color or do something else if you like
}

Here是使用上述建议的示例。

Answer 3

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

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');
        }
    });

jquery在本地存储中保存背景颜色

3 个答案: