Incorporating a function into my main page has been successful so far, but I am seeking guidance on how to effectively utilize the function:
localStorage.setItem("language", selectedLanguage);
currentlanguage= localStorage.getItem("language");
My objective is to maintain the selected language when navigating from one page to another by clicking on a link.
For instance, if "en" is the default language, and I switch to "fr" on the main page and then move to another page, the language reverts back to "en". How can I utilize localStorage to retain the selected language?
Here is the link to the jsfiddle showcasing the function I am using:
https://jsfiddle.net/kodjoe/chvw181j/
HERE IS MY HTML CODE
<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>
HERE IS MY 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");
});
HERE IS MY CSS
.button { cursor:pointer; padding: 0px 30px; }