如何将字体大小和bg颜色保存到本地存储？

Question

我在这里关于SO的类似问题的答案，但现在当我使用选择框或颜色选择器来改变字体大小或背景颜色时，根本没有任何变化。我已经评论了我添加的行，希望将更改保存到本地存储。

非常感谢任何帮助。

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检索该值。

Answer 2

我使用过这个更简单的解决方案：

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

工作示例：在https://www.webveteran.com/about-this-site/site-options/实时播放太空垃圾选项 您的选项会被保存并在您回来时加载。