使用本地存储javascript单击时刷新页面上的切换元素
[英]Toggle Elements on Page refresh on click using local storage javascript
问题描述
I am facing the following problem: 
我面临以下问题：
I want to start the page with "#Before" and "#After" hidden. 我想以“ #Before”和“ #After”隐藏的方式开始页面。 - When I click on the button "Go Back", "#Before" should be shown. -当我单击“返回”按钮时，应显示“ #Before”。 - When I click on the button "Go Forward", "#After" should be shown. -当我单击“前进”按钮时，应显示“ #After”。
But when I am clicking to show only one of the elements, and then I refresh the page. 但是，当我单击以仅显示元素之一时，然后刷新页面。 After refresh the other element is also shown. 刷新后，还将显示其他元素。 So I am seeing the two elements although I clicked only on one button. 因此，尽管我只单击了一个按钮，但我看到了两个元素。
How can I modify this code to let it work when I only want to toggle and save one of the two Elements, or when I also want to toggle both of them. 当我只想切换并保存两个元素之一时，或者当我也想切换两个元素时，如何修改此代码使其起作用。
I searched a lot in the last days and found nothing. 最近几天，我进行了很多搜索，但没有发现任何问题。 I would be very thankful and you would save my day! 我将非常感激，您将拯救我的一天！
Link to the code on jsfiddle 链接到jsfiddle上的代码
https://jsfiddle.net/bisch_basch/6orxn6kq/10/ https://jsfiddle.net/bisch_basch/6orxn6kq/10/
HTML Code: 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 Code 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);
});
2 个解决方案
解决方案1
1 已采纳 2018-03-11 14:10:25
Is that what you need? 那是你需要的吗？
$(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"));
});
});
解决方案2
1 2018-03-11 14:14:28
Here's the fiddle: JSFiddle 这是小提琴： JSFiddle
Actually, you were just storing the state of the #After and #Before elements in a single localstorage key. 实际上，您只是将#After和#Before元素的状态存储在单个localstorage密钥中。 Both referenced to the same key visible . 两者都引用了visible的同一键。 So, even if one link, say 'Go Back', modified the key (intending to set the visibility to true for the #Before element), the same key was checked to determine the visibility of #After. 因此，即使一个链接（说“ Go Back”）修改了键（打算将#Before元素的可见性设置为true ），也要检查同一键以确定#After的可见性。 As a result, #After too became visible, as it found the visible key in localstorage to be true. 结果，#After也变得可见，因为它发现localstorage的visible键为true。
What you needed to do was to separately store the visibility states for #After and #Before. 您需要做的是分别存储#After和#Before的可见性状态。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.