How can i save this script to Local Storage

Question

I want simply save changes that i've made with main text heading, changed color/font-size/font using Local Storage. So after page reload changes will stay at browser. How could i make this?

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

Answer 1

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

Answer 2

Add this code after your JS code:

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

Here is the JSFiddle demo