Используйте localStorage.setItem, чтобы сохранить те же самые шоу/скрывать divs

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

Set/Получить товар 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')); 
    }); 
});