使用localStorage.setItem保持相同的显示/隐藏div [英] Use localStorage.setItem to keep same show/hide divs

问题描述

我在主页上使用某个功能.一切正常，我只想知道如何在单击链接并进入另一个页面时将选择的语言保留在页面中.

I work with a function in my main page. All works fine, I just want to know how to keep the select language in a page when i click on a link and go in another page.

例如，默认情况下，id ="en"是该语言，但是如果我要在主页中使用id ="fr"，请单击链接，该链接将在另一页中发送给我.我将回到id ="en".因此，要保持相同的语言，我该如何使用此功能:

For example id="en" is the language by default, but if I want to use id="fr" in my main page, and click on link who will send me in another page. I will come back to id="en". So to keep the same language how can I use this function :

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

这是我用来切换语言的函数的jsfiddle:

Here is the jsfiddle of the function that I use to switch language:

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

推荐答案

首先存储您的值

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

localStorage.setItem("language", selectedLanguage); //storing under the key of language

});

然后在.ready函数中获取准备好的值

then fetch the value on ready in your .ready function

var langStored = localStorage.getItem("language");

如果未存储任何值，则将返回null.

if no values is stored it will return null.

因此，在获取langStored和获取null

看看: codepen

这篇关于使用localStorage.setItem保持相同的显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！