jQuery 返回时如何保持样式值

Question

当我从另一个页面返回时，我遇到了保持样式值的问题。

我在 jQuery 中有一个显示我的菜单的代码。

$( "#burger" ).click(function() {
    if ($("#burger").hasClass("closed")) {
      $( "#menu" ).animate({
        marginLeft: "-400px"
      }, 600, function() {
        $("#burger").removeClass("closed");
        $("#burger").addClass("open");
      });
    } else {
        $( "#menu" ).animate({
        marginLeft: 0
      }, 600, function() {
        $("#burger").removeClass("open");
        $("#burger").addClass("closed");
      });
    }
});

现在当我输入其他 link 时：例如 "gallery.html" 然后返回 "index.html" 菜单不再存在。

如何保持 margin-left:-400px;在内存中，所以当我返回时菜单仍然存在？

此外，我不想每次返回时菜单都会打开，因为在某些情况下它会关闭并且应该保留 - 所以在那种情况下应该将值记住为 "margin-left:0px;"

感谢解答！

Answer 1

这里有一个 fiddle 来完善这个答案 JS Fiddle

您可以使用 sessionStorage 或 localStorage 添加具有 HTML5 存储空间 API 的项目。

sessionStorage.setItem("leftset", "yes");
localStorage.setItem("leftset", "yes");

区别在于localStorage会无限期地保存在用户的电脑上。会话存储将在浏览器 window 关闭时将其删除。

您可以使用

sessionStorage.getItem("leftset");
localStorage.getItem("leftset");

在页面加载或 dom 就绪时从存储对象中提取，然后执行 "leftset"（在此示例中，但您可以将其设置为任何值）是否有值。

如果您想从存储中删除某项，您可以使用以下方法：

sessionStorage.removeItem("leftset");
localStorage.removeItem("leftset");

在 w3Schools or check out the demo HTML5 Storage Demo

了解更多

Answer 2

发生的事情是 JQuery 或任何基于 JS 的语言在客户端上工作，因此当您重新加载页面或您的应用程序导致回发时，JQuery 所做的每一次更改都将被删除.正如 zfrisch 所发布的那样，最好的方法是 "save" 用户已经点击了该项目，并根据是否已更改来确定它的位置。

//if you are interested on keeping it this way until browser is erased manually
localStorage.itemClicked = true;
//if the configuration is going to be reset on everytime the user opens his browser
sessionStorage.itemClicked = true;

并在 .ready 函数中更改其位置

$(function(){
    if(localStorage.itemClicked){
        $('#burger').addClass("open");
        $('#burger').css({margin-left:"-400px"});
    }
});

您的点击事件应该如下所示

$( "#burger" ).click(function() {
    if ($("#burger").hasClass("closed")) {

      $( "#menu" ).animate({
        marginLeft: "-400px"
      }, 600, function() {
        $("#burger").removeClass("closed");
        $("#burger").addClass("open");

        //save that was clicked
        localStorage.itemClicked = true;
      });
    } else {

        $( "#menu" ).animate({
        marginLeft: 0
      }, 600, function() {
        $("#burger").removeClass("open");
        $("#burger").addClass("closed");

        //remove the key so it is not wasting memory
        localStorage.removeItem("itemClicked");
      });
    }
});

希望对您有所帮助

jQuery 返回时如何保持样式值

jQuery how to keep the style value when going back

jquery

store