当我们更改页面时继续显示和隐藏 div

Question

我在主页上使用一个功能。一切正常，我只想知道如何使用该功能：

localStorage.setItem("language", selectedLanguage);

currentlanguage= localStorage.getItem("language");

我的目标是当我点击 link 并进入另一个页面时，在页面中保留 select 语言。

例如id="en"是默认的语言，但是如果我想在我的主页使用id="fr"，点击link谁会发给我在另一页。我会回到id="en"。那么如何使用 localStorage 来保持相同的语言呢？

这是我使用的函数的 jsfiddle：

https://jsfiddle.net/kodjoe/chvw181j/

这是我的 HTML 代码

<a class="button" id="en">EN</a>
<a class="button" id="fr">FR</a>
<a class="button" id="de">DE</a>


<div class="lan en">1</div>
<div class="lan fr">2</div>
<div class="lan de">3</div>
<div class="lan en">4</div>
<div class="lan fr">5</div>
<div class="lan de">6</div>

这是我的 JS

$(document).ready(function() {
$('.lan').hide();
$('.en').show();
});

$('.button').click(function(event) {
$('.lan').hide();
var selectedLanguage = $(this).attr('id');
var setActiveLanguage = "." + selectedLanguage;
$(setActiveLanguage).show();

localStorage.setItem("language", selectedLanguage);
currentlanguage= localStorage.getItem("language");
});

这是我的 CSS

.button { cursor:pointer; padding: 0px 30px; }

Answer 1

您可以使用 SessionStorage 来保存您的数据（例如选择的语言）。然后用 if 子句扩展你的函数来设置正确的 show/hide-status.

Answer 2

localStorage.setItem("language", selectedLanguage);

currentlanguage= localStorage.getItem("language");

Answer 3

您可以使用 localStorage，但我只想将代码放在您希望包含任何全局脚本的文件中，因为您将会或已经拥有适用于整个应用程序的其他脚本。然后 link 你脑海中的文件（你可能会为你的 header 内容使用某种包含）。

<script src="js/globalScripts.js"></script>

//globalScripts.js

$(document).ready(function() {
    $('.lan').hide();
    $('.en').show();
});

$('.button').click(function(event) {
    $('.lan').hide();
    var selectedLanguage = $(this).attr('id');
    var setActiveLanguage = "." + selectedLanguage;
    $(setActiveLanguage).show();
});

当我们更改页面时继续显示和隐藏 div

continue with same Show and hide divs when we change page

html

javascript

css

jquery

show-hide