javascript - Different font sizes on website -

my website has menu named font size. option user change font size of website like:

smaller small medium large 

default font size "small". when user selects font size "medium", font size should remain medium throughout user's visit pages of website(in 1 browser session). how achieve through javascript or jquery or else.

i tried changing font size on selection when go page font size changes default font size.

my website using html5, css3, javascript, jquery. on spring mvc/java.

in ideal world, have on elements on page based on percentage of body font size, e.g.

body{ font-size: 12px; } h1{ font-size: 120%; } 

or

h1{ font-size: 1.5em; } 

if had set up, can change font-size of body element, , automagically update fonts on page.

as baadshah has suggested, can use jquery cookie plugin persist users selection across pages.

i have put simple demo here @ jsfiddle

you can change body font-size based on selection, set cookie, , check see if cookie exists, set font size.

if ( $.cookie('font-size') ){     console.log($.cookie('font-size')); // take out when not debugging     $('body').css({ 'font-size': $.cookie('font-size')}); }