javascript - How to keep font size always 150% after page refresh or open page again?

Question

I've create two button which allow users to change the font size of texts in my webpage.It's work nice, but after refresh or reopen the page the font size always back to the normal size. So how to keep font size always 150% after page refresh or reopen? Here is my jQuery code:

$(document).ready(function() {

$("#l").click(function() {

    $("p").css("font-size","150%");

});

$("#n").click(function() {

    $("p").css("font-size","100%");

})

});

Answer 1

You can use LocalStorage - (on supported browsers), to save a string that represents the current fontSize and then fetch it back on page load.

Saving to Local storage thru JS:

localStorage.setItem("fontSize", 15);

Fetching back

$(document).ready(function() {
    var fontSize = localStorage.getItem("fontSize");
    //rest of code here to set the font size based on fontSize value
});