jquery保存本地存儲中的背景顏色

我試圖在按鈕單擊後在本地存儲中保存背景顏色的更改，但刷新窗口時並未保存。我忘了什麼嗎？jquery保存本地存儲中的背景顏色

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

來源

2015-04-26 Franky

您還需要編寫代碼來設置基於本地存儲的背景色，像'如果（localStorage.bgColor）$（ 'BTN-secondmenu '）。CSS（' 背景色'，localStorage的.bgColor）;'。你現在正在做的就是設置它，你永遠不會使用它。 – powerbuoy

您需要將顏色設置爲變量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

來源

2015-04-26 07:13:43

一個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是一個使用上述建議的例子。

來源

2015-04-26 07:14:54 boombox

* localStorage項目的值應該是一個字符串* - 不，它可以是任何東西。 JSON，數組，對象。它正在被儲存。您可以檢查開發者控制檯的資源選項卡。 –

你說得對，但是localStorage在內部處理字符串。對象被轉換成字符串。如果你做了'localStorage.setItem（'hi'，{a：1}）;'，這會存儲「[object Object]」。但是，那不是你想要的。你應該做的是'localStorage.setItem（'hi'，JSON.stringify（{a：1}）;'以確保你可以通過'JSON.parse（localStorage.getItem（'hi'））''檢索它。我會更新我的答案以澄清。謝謝。 – boombox

是的，你就在那裏。 –

感謝您的回覆，更多選項正在工作。我現在試圖每次用戶點擊按鈕時切換顏色，並在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'); 
     } 
    });

來源

2015-04-27 16:13:29 Franky

jquery保存本地存儲中的背景顏色

回答

相關問題