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

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

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

---

您需要将颜色设置为可变状态。当前代码将$.btn secondmenu-jQuery对象设置为本地存储

$(".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);
});

---

您需要将颜色设置为可变状态。当前代码将$.btn secondmenu-jQuery对象设置为本地存储

$(".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);
});

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

例如：

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
}

是使用上述建议的示例。

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

例如：

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
}

---

是使用上述建议的示例。

感谢回复，更多选项正在发挥作用。我现在尝试在用户每次单击按钮时切换颜色，并将背景颜色保存在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');
        }
    });

---

感谢您的回复，更多选项正在运行。我现在尝试在用户每次单击按钮时切换颜色，并将背景颜色保存在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');
        }
    });

---

localStorage项的值应该是字符串-不，它可以是任何内容。JSON、数组、对象。它正在被储存。您可以查看开发人员控制台的“资源”选项卡。您是对的，但localStorage在内部处理字符串。对象将转换为字符串。如果您使用localStorage.setItem'hi'，{a:1}；，这将存储[object]。但是，那不是你想要的。您应该做的是localStorage.setItem'hi'，JSON.stringify{a:1}；确保您可以通过JSON.parselocalStorage.getItem'hi'检索它。我将更新我的答案以澄清。谢谢。localStorage项的值应该是字符串-不，它可以是任何内容。JSON、数组、对象。它正在被储存。您可以查看开发人员控制台的“资源”选项卡。您是对的，但localStorage在内部处理字符串。对象将转换为字符串。如果您使用localStorage.setItem'hi'，{a:1}；，这将存储[object]。但是，那不是你想要的。您应该做的是localStorage.setItem'hi'，JSON.stringify{a:1}；确保您可以通过JSON.parselocalStorage.getItem'hi'检索它。我将更新我的答案以澄清。谢谢。您还需要基于本地存储设置背景颜色的代码，例如如果localStorage.bgColor$'.btn secondmenu'.css'background-color'，localStorage.bgColor；。您现在所做的只是设置它，而不是实际使用它。您还需要根据本地存储设置背景颜色的代码，例如如果localStorage.bgColor$'.btn secondmenu'.css'background-color'，localStorage.bgColor；。你现在所做的就是设置它，你从来没有真正使用过它。