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

最初に値を保存してください

何の値が、それは nullを返します保存されていない場合

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

に準備ができて上の値を取得します。

ですから、あなたが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')); 
    }); 
});