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

我只想保存我对主文本标题所做的更改，使用本地存储更改颜色/字体大小/字体。所以重新加载页面后，更改将停留在浏览器上。我怎么做这个

Html:

更改标题
H1
氢
H3
H4
H5
选择文本颜色
更改字体
字体
单空间
衬线
幻想
威尔达纳
影响
字号
14
18
22
24
26

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");
    });

$（'#选择'）。更改（函数（）{
var标记=$（this.val（）；
$（“.main_text”）.html（“更改标题”）；
});
$（'#颜色选择器'）。更改（函数（）{
var color_p=$（this.val（）；
$（'.main_text'）.css（“color”，color_p）；
});
$（'#选择字体'）。更改（函数（）{
var change_font=$（this.val（）；
$（“.main_text”）.css（“字体系列”，更改字体）；
});
$（“#更改字体大小”）.change（函数（）{
var font_size=$（this.val（）；
$（'.main_text>*'）.css（“字体大小”，字体大小+“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");
    }
});

$(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");
    });
});

$（文档）.ready（函数（）{
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({
“颜色”：颜色，
“字体系列”：字体，
“字号”：字号
}).html（“更改标题”）；
$（'#selection'）.val（标记）；
$（'color#u picker'）.val（color）；
$（'#选择_font'）.val（字体）；
$（'更改字体大小'）.val（大小）；
$（'#selection'）。更改（函数（）{
var标记=$（this.val（）；
localStorage.tag=tag；
$（“.main_text”）.html（“更改标题”）；
});
$（'#颜色选择器'）。更改（函数（）{
var color_p=$（this.val（）；
localStorage.color=color\u p；
$（'.main_text'）.css（“color”，color_p）；
});
$（'#选择字体'）。更改（函数（）{
var change_font=$（this.val（）；
localStorage.font=更改字体；
$（“.main_text”）.css（“字体系列”，更改字体）；
});
$（“#更改字体大小”）。更改（函数（）{
var font_size=$（this.val（）；
localStorage.font\u size=字体大小；
$（'.main_text>*'）.css（“字体大小”，字体大小+“px”）；
});
});

$(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");
    });
});