如何在页面刷新或再次打开页面后始终保持字体大小为150%？

Question

我创建了两个按钮,允许用户更改我的网页中文本的字体大小.它工作得很好,但刷新或重新打开页面后,字体大小总是回到正常大小.那么如何在页面刷新或重新打开后保持字体大小始终为150%？这是我的jQuery代码:

$(document).ready(function() {

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

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

});

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

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

})

});

Answer 1

您可以使用LocalStorage - (在支持的浏览器上)保存表示当前 的字符串,fontSize然后在页面加载时将其恢复.

通过JS保存到本地存储:

localStorage.setItem("fontSize", 15);

取回来

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

Answer 2

它已被提及使用localStorage(+1 @Nicholas),但由于我已经完成了一个JSFiddle,我想我也可以包括它.代码如下:

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

这是JSFiddle.运行几次,你会发现价值贯穿始终.