使用localStorage.setItem來保持相同的顯示/隱藏div

Question

我在我的主頁中使用了一個函數。所有的作品都很好，我只想知道如何在頁面中保留選擇語言，當我點擊一個鏈接並進入另一個頁面。

例如ID =「EN」爲默認語言，但如果我想使用ID =「FR」在我的主頁，並點擊鏈接誰將會給我的另一頁。我會回到id =「en」。因此，要保持相同的語言，我怎麼可以使用此功能：

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

下面是函數的的jsfiddle，我用它來切換語言：

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>

Answer 1

首先存儲您的值

$('.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功能

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

如果沒有值存儲將返回null。

所以把條件有你想要的東西，當你langStored做的，當你null

採取偷看：codepen

Answer 2

設置/獲取localStorage的項目。

localStorage.setItem('selectedLang', $(this).attr('id')); 

localStorage.getItem('selectedLang'); 

文檔：HTML5 Web Storage

代碼爲你的榜樣

$(document).ready(function() { 
    $('.lan').hide(); 
    var classSel = localStorage.getItem('selectedLang') ? localStorage.getItem('selectedLang') : 'en'; 
    //Get the value from localStorage and show that class only 
    $('.'+classSel).show(); 

    $('.button').click(function(event) { 
     $('.lan').hide(); 
     $("." + $(this).attr('id')).show(); 
     //Set the localStorage value 
     localStorage.setItem('selectedLang', $(this).attr('id')); 
    }); 
});