How To Keep Font Size Always 150% After Page Refresh Or Open Page Again?

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

Solution 1:

You can use LocalStorage - (on supported browsers), to save a string that represents the currentfontSize 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
});

Solution 2:

It has already been mentioned to use localStorage (+1 @Nicholas), but as I was already about finished with a JSFiddle, I figured I might as well include it. The code is as follows:

if (localStorage.fontSize)
{
    $('p').css('fontSize', localStorage.fontSize);
}

$("#m").click(function () {
    $("p").css("font-size", "150%");
    localStorage.fontSize = '150%';
});

$("#n").click(function () {
    $("p").css("font-size", "100%");
    localStorage.fontSize = '100%';
});

And here's the JSFiddle. Run it a few times and you'll see that the value carries across.