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来保存选择，但我无法弄清楚如何让它工作......我已经搜索了stackoverflow我发现了类似的问题但不是我正在寻找的答案。

我猜是因为问我一个类似的问题，但是我过去了，并没有真正看到它是如何适用的。我可以在每个项目上使用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

1 个答案: