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");
      });
    }
});

现在当我输入其他链接时：例如＆＃34; gallery.html＆＃34;然后回到＆＃34; index.html＆＃34;菜单不再存在。

我如何保持左边距：-400px;在记忆中，所以当我回去菜单仍然会在那里？

此外，我不希望菜单在我每次回去时都会打开，因为在某些情况下它会被关闭而且应该保留 - 所以在这种情况下，值应该被记住为＆＃34; margin-左：0像素;＆＃34;

感谢您的回答！

Answer 1

这里有一个完整的答案JS Fiddle

您可以使用sessionStorage或localStorage添加带有HTML5 Storage API的项目。

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

区别在于localStorage会无限期地将其保存在用户计算机上。会话存储将在浏览器窗口关闭时将其删除。

您可以使用

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

要在页面加载或dom ready上从存储对象中拉出，然后执行是否＆＃34; leftset＆＃34;（在此示例中，但您可以将其设置为任何）具有值。

如果您想从存储中删除项目，可以使用以下内容：

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

在w3Schools了解详情或查看演示HTML5 Storage Demo

Answer 2

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

//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如何在返回时保持样式值

2 个答案: