Question

我遇到以下问题：

我想用＆＃34;＃Before＆＃34;开始页面。＆＃34;＃After＆＃34;隐。 - 当我点击按钮＆＃34; Go Back＆＃34;，＆＃34;＃Before＆＃34;应该显示。 - 当我点击按钮＆＃34;前进＆＃34;，＆＃34;＃After＆＃34;应该显示。

但是，当我点击只显示其中一个元素，然后我刷新页面。刷新后，还会显示其他元素。所以我看到了两个元素，虽然我只点击了一个按钮。

当我只想切换并保存两个元素之一时，或者当我还要切换它们时，如何修改此代码以使其工作。

我在最后几天搜索了很多，但一无所获。我会非常感激，你会救我的一天！

链接到jsfiddle上的代码

https://jsfiddle.net/bisch_basch/6orxn6kq/10/

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>

JavaScript代码

$(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);

});

Answer 1

这就是你需要的吗？

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

Answer 2

这里是小提琴：JSFiddle

实际上，您只是将#After和#Before元素的状态存储在单个localstorage键中。两者都引用了相同的键visible。因此，即使有一个链接，说“返回”，修改了密钥（打算将#Before元素的可见性设置为true），也会检查相同的密钥以确定＃后。结果，＃After变得可见，因为它发现visible中的localstorage键是真的。

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

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

2 个答案: