¿Cómo mantener el tamaño de fuente siempre 150% después de actualizar la página o abrir página de nuevo?

He creado dos botones que permiten a los usuarios cambiar el tamaño de la fuente de los textos en mi página web. Funciona bien, pero después de actualizar o volver a abrir la página, el tamaño de la fuente siempre vuelve al tamaño normal. Entonces, ¿cómo mantener el tamaño de fuente siempre 150% después de actualizar o volver a abrir la página? Aquí está mi código jQuery:

$(document).ready(function() { $("#l").click(function() { $("p").css("font-size","150%"); }); $("#n").click(function() { $("p").css("font-size","100%"); }) 

});

Ya se ha mencionado que use localStorage (+1 @Nicholas), pero como ya estaba a punto de terminar con JSFiddle, pensé que podría incluirlo. El código es el siguiente:

 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%'; }); 

Y aquí está el JSFiddle . Ejecútelo varias veces y verá que el valor se transmite.

Puede usar LocalStorage – ( en navegadores compatibles ), para guardar una cadena que represente el fontSize actual y luego recuperarla en la carga de la página.

Guardar en almacenamiento local a través de JS:

 localStorage.setItem("fontSize", 15); 

Recuperando

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