How to save selected font size to localStorage

Question

I have set up 3 buttons that change the font size of the web page. I'm struggling to figure out how to save the selection so that it works across all the pages without having to click a button every time a load pages.

Here's what my buttons look like

    $("#small").click(function(){
    $("p").animate({"font-size":"1em"});
    $("h1").animate({"font-size":"3em"});
    $("h2").animate({"font-size":"1.5em"});
    $("h3").animate({"font-size":" 1.25em"});
    }
    );


    $("#medium").click(function(){
    $("p").animate({"font-size":"1.5em"});
    $("h1").animate({"font-size":"3.5em"});
    $("h2").animate({"font-size":"2em"});
    $("h3").animate({"font-size":" 1.75em"});
    }
    );

    $("#large").click(function(){
    $("p").animate({"font-size":"2em"});
    $("h1").animate({"font-size":"4em"});
    $("h2").animate({"font-size":"2.5em"});
    $("h3").animate({"font-size":" 2.25em"});
    }
    );

I'm trying to use localStorage to save the selection, but I can't figure out how to get that to work... I've searched stackoverflow I've found similar questions but not the answer I'm looking for.

I got flagged for asking a similar question I guess, but I went over it and don't really see how it applies. Could I use localStorage.setItem on each item like so?

     $("#large").click(function(){
    localStorage.setItem($("p").animate({"font-size":"2em"}));
    );

Edit: Nope, that didn't work at all.

are you looking to save the sizes for p, h1, h2 and h3 tags, and re-use those sizes on other pages? — Hardik, Mar 20 '17 at 17:23
Possible duplicate of [Storing Objects in HTML5 localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Liam, Mar 20 '17 at 17:25
Yeah basically I want to save all the changes each button makes. — Ben Grzybowski, Mar 20 '17 at 17:34

score 0 · Accepted Answer · answered Mar 20 '17 at 21:17

Well I scrapped everything and started over and came up with something much more simple that works the way I want to. I'm too dumb to figure out how to delete this question, because I feel stupid for asking, but heres what I did. It looks like this.

    $("#small").on("click", 
    function(){
    localStorage.setItem("fontSize", "1");
    window.location.reload();
    }
    );

    $("#medium").on("click", 
    function(){
    localStorage.setItem("fontSize", "2");
    window.location.reload();
    }
    );

    $("#large").on("click", 
    function(){
    localStorage.setItem("fontSize", "3");
    window.location.reload();
    }
    );

    if (localStorage.fontSize === "1") {
    $("body").css("font-size", "12px");
    }

    if (localStorage.fontSize === "2") {
    $("body").css("font-size", "18px");
    }

    if (localStorage.fontSize === "3") {
    $("body").css("font-size", "24px");
    }

My if statements aren't nested because I keep getting errors thrown at me in the console when I try and nest them. So to hell with it, this has frustrated me enough today!

How to save selected font size to localStorage

1 Answers1