フォントサイズとbgの色をローカルストレージに保存する方法は？

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 colour = localStorage.color || $('#colour_picker').val(); 
    //var size = localStorage.font_size || $('#change_font_size').val(); 

    //$('#color_picker').val(color); 
    //$('#change_font_size').val(size); 

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

Answer 1

下図のようにあなたはHTML5のローカルストレージを使用することができます。

//Check if value exists or not 
if (localStorage.getItem("font_size") === null) { 
    localStorage.setItem("font_size", font_size); 
} else { 
    var font_size = localStorage.getItem("font_size"); 
} 

あなたはその後、setItemでのlocalStorageに値を格納することができgetItemを使用して値を取得します。保存されますhttps://www.webveteran.com/about-this-site/site-options/ あなたのオプションでリアルタイムで宇宙ゴミのオプションで再生すると、あなたが戻ってきたときにロードされます。

<script type="text/javacript"> 
// SITE OPTIONS 
var storage = window.localStorage; 

// JUNK SIZE 
function updateJunkSize(newSize) { 
    storage.junkSize = newSize; 
} 

// SET A DEFAULT 
if (!storage.junkSize) { 
    storage.junkSize = 4; 
} 
</script> 

実施例：

Answer 2

私はこのシンプルなソリューションを使用しました。