如何将选定的字体大小保存到 localStorage

Question

我设置了 3 个改变网页字体大小的按钮。我正在努力弄清楚如何保存选择，以便它在所有页面上工作，而不必在每次加载页面时都单击按钮。

这是我的按钮的样子

    $("#small").click(function(){
    $("p").animate({"font-size":"1em"});
    $("h1").animate({"font-size":"3em"});
    $("h2").animate({"font-size":"1.5em"});
    $("h3").animate({"font-size":" 1.25em"});
    }
    );


    $("#medium").click(function(){
    $("p").animate({"font-size":"1.5em"});
    $("h1").animate({"font-size":"3.5em"});
    $("h2").animate({"font-size":"2em"});
    $("h3").animate({"font-size":" 1.75em"});
    }
    );

    $("#large").click(function(){
    $("p").animate({"font-size":"2em"});
    $("h1").animate({"font-size":"4em"});
    $("h2").animate({"font-size":"2.5em"});
    $("h3").animate({"font-size":" 2.25em"});
    }
    );

我正在尝试使用 localStorage 来保存选择，但我不知道如何让它工作...我搜索了 Whosebug 我发现了类似的问题，但没有我的答案我在找。

我猜我是因为问了一个类似的问题而被标记了，但我仔细看了一遍，并没有真正明白它是如何应用的。我可以像这样在每个项目上使用 localStorage.setItem 吗？

     $("#large").click(function(){
    localStorage.setItem($("p").animate({"font-size":"2em"}));
    );

编辑：不，那根本不起作用。

Answer 1

好吧，我放弃了一切，重新开始，想出了一些更简单的东西，可以按照我想要的方式工作。我太笨了，不知道如何删除这个问题，因为我觉得问这个问题很愚蠢，但这就是我所做的。看起来像这样。

    $("#small").on("click", 
    function(){
    localStorage.setItem("fontSize", "1");
    window.location.reload();
    }
    );

    $("#medium").on("click", 
    function(){
    localStorage.setItem("fontSize", "2");
    window.location.reload();
    }
    );

    $("#large").on("click", 
    function(){
    localStorage.setItem("fontSize", "3");
    window.location.reload();
    }
    );

    if (localStorage.fontSize === "1") {
    $("body").css("font-size", "12px");
    }

    if (localStorage.fontSize === "2") {
    $("body").css("font-size", "18px");
    }

    if (localStorage.fontSize === "3") {
    $("body").css("font-size", "24px");
    }

我的 if 语句没有嵌套，因为当我尝试嵌套它们时，控制台中不断向我抛出错误。所以见鬼去吧，这让我今天很沮丧！

如何将选定的字体大小保存到 localStorage

How to save selected font size to localStorage

jquery

font-size

local-storage