如何將背景顏色保存到本地存儲？

Question

我正在使用字體大小和顏色選擇器的選擇框，以允許用戶選擇首選標題背景顏色以及字體大小。

字體大小保存到預期的本地存儲，並在頁面被重新訪問時更新（雖然我寧願它已經被更改而不是動畫到新的大小）。

但是，我使用完全相同的方法完成了背景顏色，但是當我更改顏色時，它會工作一次，但在重新打開時會返回到之前的顏色。

HTML：

<header class="siteHeader"> 
      <div id="container"> 
       <select id="change_font_size"> 
        <option value="225">225</option> 
        <option selected value="250">250</option> 
        <option value="300">300</option> 
        <option value="350">350</option> 
       </select> 
       <p style="float: left;">A+/-</p> 
       <input type="color" id="colour_picker"> 
       <p style="float: right;">Background colour:</p> 
       </div> 
      <nav> 
       <ul> 
       <li><a href="menu.html">MENU</a></li> 
       <li><a href="burritos.html">BURRITOS</a></li> 
        <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li> 
       <li><a href="contact.html">CONTACT</a></li> 
       <li><a href="about.html">ABOUT</a></li> 
       </ul> 
      </nav> 
     </header> 

JS：

$(document).ready(function() { 
    var font_size = localStorage.getItem("font_size"); 
    $('.siteHeader').css("font-size", font_size + "%"); 
    var background_colour = localStorage.getItem("background_colour"); 
    $('.siteHeader').css("background-color", background_colour); 

    $("#change_font_size").change(function() { 
     var font_size = $(this).val(); 
     $('.siteHeader').css("font-size", font_size + "%"); 
     localStorage.setItem("font_size", font_size); 
    }); 

    $('#colour_picker').change(function() { 
     var background_colour = $(this).val(); 
     $('.siteHeader').css("background-color", background_colour); 
     localStorage.setItem("background_color", background_colour); 
    }); 
}); 

Answer 1

你將其設置爲 「BACKGROUND_COLOR」，並試圖找回它爲 「background_colour」。