背景色をローカルストレージに保存する方法は？

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：あなたは "BACKGROUND_COLOR" として設定し、 "background_colour" としてそれを取得しようとしている

$(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

。