使用本地存储javascript切换页面上的元素单击刷新_Javascript_Html

使用本地存储javascript切换页面上的元素单击刷新

javascript html

使用本地存储javascript切换页面上的元素单击刷新,javascript,html,Javascript,Html,我面临以下问题：我想以隐藏的“#Before”和“#After”开始页面。 -当我点击“返回”按钮时，应显示“之前”。 -当我点击“前进”按钮时，应显示“之后” 但当我单击仅显示其中一个元素，然后刷新页面时。刷新后，还会显示另一个元素。所以我看到了这两个元素，尽管我只点击了一个按钮当我只想切换和保存这两个元素中的一个，或者当我还想切换这两个元素时，如何修改这段代码使其工作在过去的几天里我找了很多东西，什么也没找到。我会非常感激，你会拯救我的一天链接到JSFIDLE上的代码 $(docu

我面临以下问题：

我想以隐藏的“#Before”和“#After”开始页面。 -当我点击“返回”按钮时，应显示“之前”。 -当我点击“前进”按钮时，应显示“之后”

但当我单击仅显示其中一个元素，然后刷新页面时。刷新后，还会显示另一个元素。所以我看到了这两个元素，尽管我只点击了一个按钮

当我只想切换和保存这两个元素中的一个，或者当我还想切换这两个元素时，如何修改这段代码使其工作

在过去的几天里我找了很多东西，什么也没找到。我会非常感激，你会拯救我的一天

链接到JSFIDLE上的代码

$(document).ready(function(){

$("#Before").css('display','none');

$("#After").css('display','none');

$("#Button1").click(function(){
    $("#Before").toggle(); 

    var isVisible = $("#Before").is(":visible"); 
    localStorage.setItem('visible', isVisible);
});
    var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
    $("#Before").toggle(isVisible);

$("#Button2").click(function(){
    $("#After").toggle(); 

    var isVisible = $("#After").is(":visible"); 
    localStorage.setItem('visible', isVisible);
});
    var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
    $("#After").toggle(isVisible);

});

HTML代码：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script type='text/javascript' src='main.js'></script>
<body>
<div class="menu" id="myHeader">
    <a style="float:left" href="#">Menu</a>
    <a id="Before" href="#"> Back </a>
    <a id="Current" href="#"> Current </a>
    <a id="After" href="#"> After </a>
</div>
<button id="Button1"> Go Back </button>
<button id="Button2"> Go Forward </button>
</body>
</html>

这就是你需要的吗

$(function() {
  var isVisible;
  $("#After, #Before").toggle(false);

  if (localStorage.getItem('before_visible') != null) {
    isVisible = localStorage.getItem('before_visible') === 'false' ? false : true;
    $("#Before").toggle(isVisible);
  }
  if (localStorage.getItem('after_visible') != null) {
    isVisible = localStorage.getItem('after_visible') === 'false' ? false : true;
    $("#After").toggle(isVisible);
  }

  $("#Button1").click(function(){
      $("#Before").toggle();
      localStorage.setItem('before_visible', $("#Before").is(":visible"));
  });

  $("#Button2").click(function(){
      $("#After").toggle();
      localStorage.setItem('after_visible', $("#After").is(":visible"));
  });
});

这是小提琴：

实际上，您只是将#After和#Before元素的状态存储在一个

localstorage

键中。两者都引用了相同的键

可见

。因此，即使有一个链接（比如“返回”）修改了键（打算将#Before元素的可见性设置为

true

），也会检查同一个键以确定#After的可见性。因此，#After too变得可见，因为它发现

visible

中的

localstorage

键为true

您需要做的是分别存储#After和#Before的可见性状态。

只是对预期行为的澄清：如果您先单击“返回”然后单击“前进”，那么#back和#After是否都变为可见？是的，它们应该变为可见。问题是，当我只单击“返回”时，“返回”变为可见，然后我刷新页面。之后#After也将与#back可见。