jQuery返回时如何保持样式值

当从另一个页面返回到另一个页面时，我对保持样式值存在问题

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

现在，当我输入其他链接时：例如“gallery.html”，然后返回“index.html”，菜单就不在了

如何保持左边的边距：-400px；在内存中，所以当我返回时，菜单仍然会在那里

此外，我不想每次返回时菜单都会打开，因为在某些情况下，它会关闭，并且应该保持不变-因此在这种情况下，该值应记为“左边距：0px

---

谢谢你的回答

这里有一把小提琴来完善这个答案

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

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

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

你可以用

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

要从page load或dom ready上的存储对象中提取数据，然后执行“leftset”（在本例中，您可以将其设置为任意值）是否具有值

如果要从存储器中删除项目，可以使用以下方法：

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

---

了解更多信息或查看演示

目前的情况是，JQuery或任何基于JS的语言都可以在客户端上运行，因此当您重新加载页面或应用程序时，JQuery所做的每一项更改都将被删除。正如zfrisch所发布的，最好的方法是“保存”用户已经单击的项目，并根据是否已更改其位置

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

---

希望它有帮助

如果菜单应该在某处打开或关闭，您需要存储信息，也许是一个cookie？我尝试过这个解决方案。。。但是在这种情况下，当我返回或刷新窗口时，菜单总是打开的，无论我是否首先打开它，这意味着每次都在评估localStorage.itemClicked为true。请发布console.log（localStorage.itemClicked）的结果或者是inspector的存储部分的打印，这样我就可以提供一些帮助，我已经通过将localStorage.itemClicked=true使它工作了；动画完成后-不知道如何工作，但请在您的帖子中修复它，这样我可以将其标记为一个好的答案。现在更改它，它应该以任何方式工作我正在寻找原因