我如何将此脚本保存到本地存储

How can i save this script to Local Storage

本文关键字：存储 保存 脚本      更新时间：2023-09-26

我想简单地保存更改，我已经与主文本标题，改变颜色/字体大小/字体使用本地存储。所以在页面重新加载后，更改将留在浏览器中。我怎么能做到呢?

Html: 

        <div class="main_text">
            <h1>Change Headings</h1>
        </div>
        <select id="selection">
            <option value="h1">H1</option>
            <option value="h2">H2</option>
            <option value="h3">H3</option>
            <option value="h4">H4</option>
            <option value="h5">H5</option>
        </select>
        <div class="color_picker">
            <h3>Choose Text Color</h3>
            <input type="color" id="color_picker">
        </div>
        <div class="change_font">
            <h3>Change Font</h3>
            <select id="select_font">
                <option value="Sans-serif">Sans-serif</option>
                <option value="Monospace">Monospace</option>
                <option value="Serif">Serif</option>
                <option value="Fantasy">Fantasy</option>
                <option value="Verdana">Verdana</option>
                <option value="Impact">Impact</option>
            </select>
        </div>
        <div class="change_size">
            <h3>Font Size</h3>
            <select id="change_font_size">
                <option value="14">14</option>
                <option value="18">18</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
            </select>
    </div>
JQuery: 

    $('#selection').change(function () {
        var tag = $(this).val();
        $(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
    });
    $('#color_picker').change(function() {
        var color_p = $(this).val();
        $('.main_text').css("color", color_p);
    });
    $('#select_font').change(function () {
        var change_font = $(this).val();
        $(".main_text").css("font-family", change_font);
    });
    $("#change_font_size").change(function() {
        var font_size = $(this).val();
        $('.main_text > *').css("font-size", font_size + "px");
    });

JSfiddle

DEMO 

$(document).ready(function () {
    var tag = localStorage.tag || $('#selection').val();
    var color = localStorage.color || $('#color_picker').val();
    var font = localStorage.font || $('#select_font').val();
    var size = localStorage.font_size || $('#change_font_size').val();
    $('.main_text').css({
        "color": color,
        "font-family": font,
        "font-size": size
    }).html("<" + tag + ">Change Headings</" + tag + ">");
    $('#selection').val(tag);
    $('#color_picker').val(color);
    $('#select_font').val(font);
    $('#change_font_size').val(size);
    $('#selection').change(function () {
        var tag = $(this).val();
        localStorage.tag = tag;
        $(".main_text").html("<" + tag + ">Change Headings</" + tag + ">");
    });
    $('#color_picker').change(function () {
        var color_p = $(this).val();
        localStorage.color = color_p;
        $('.main_text').css("color", color_p);
    });
    $('#select_font').change(function () {
        var change_font = $(this).val();
        localStorage.font = change_font;
        $(".main_text").css("font-family", change_font);
    });
    $("#change_font_size").change(function () {
        var font_size = $(this).val();
        localStorage.font_size = font_size;
        $('.main_text > *').css("font-size", font_size + "px");
    });
});

在JS代码之后添加以下代码:

$(document).ready(function () {
    //load values if found
    if (localStorage.getItem("selection") != null) {
        $('#selection').val(localStorage.getItem("selection")).trigger("change");
    }
    if (localStorage.getItem("color_picker") != null) {
        $('#color_picker').val(localStorage.getItem("color_picker")).trigger("change");
    }
    if (localStorage.getItem("select_font") != null) {
        $('#select_font').val(localStorage.getItem("select_font")).trigger("change");
    }
    if (localStorage.getItem("change_font_size") != null) {
        $('#change_font_size').val(localStorage.getItem("change_font_size")).trigger("change");
    }
});

这里是JSFiddle演示

相关文章：