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

Question

我创建了两个按钮，允许用户在 webpage.It 的作品中更改文本的字体大小，但在刷新或重新打开页面后，字体大小总是恢复到正常大小。那么如何在页面刷新或重新打开后保持字体大小始终为 150%？这是我的 jQuery 代码：

$(document).ready(function() {

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

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

});

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

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

})

});

Answer 1

您可以使用 LocalStorage - (on supported browsers) 来保存表示当前 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。运行重复几次，您就会发现它的价值。

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

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

html

javascript

css

jquery

fonts