如何将字体大小和背景颜色保存到本地存储？答案

【问题标题】：How to save font size and bg color to local storage?如何将字体大小和背景颜色保存到本地存储？
【发布时间】：2017-03-13 23:58:40
【问题描述】：

我在 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);
    });
});

【问题讨论】：

你会像保存其他任何东西到本地存储一样保存它......所以问题是你如何访问本地存储？

标签： javascript jquery html local-storage

【解决方案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 检索该值。

【讨论】：

【解决方案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/ 实时玩太空垃圾选项您的选项将被保存并在您回来时加载。

【讨论】：