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

您将其设置为＆＃34; background_color＆＃34;并尝试将其检索为＆＃34; background_colour＆＃34;。

如何将背景颜色保存到本地存储？

1 个答案: