LocalStorage multilanguage
HTML
<select id="changelocation" name="language">
<option value="">Please select</option>
<option value="ja">Japanese</option>
<option value="en">English</option>
<option value="de">Frensh</option>
</select>
<label for="firstname">First Name</label><input id="firstname">
<label for="lastname">Last Name</label><input id="lastname">
<label for="message">Message</label><textarea id="message"></textarea>
JavaScript
// declarer la variable
var language = localStorage.getItem('language');
//si la variable existe changer la valeur du select box avec celle enregistre
if (language) {
var lang1 = $('#changelocation').val(language);
}
// si elle n'existe pas encore affecter la valeur par defaut du select a la variable
else {
var language = $('#changelocation option:selected').val();
localStorage.setItem('language', language);
}
$.i18n = function(options){
options = $.extend({}, {
lang: 'en',
data: $.i18n,
sliceLang: false
}, options);
var storeData = function(data){
if(!data) return;
if(window.localStorage) {
localStorage.setItem( "langStore", JSON.stringify(data) );
langStore = data;
} else {
langStore = data;
}
};
if(window.localStorage) {
var localLangStore = localStorage.getItem("langStore");
storeData( localLangStore !== null ? JSON.parse(localLangStore) : langStore);
} else {
storeData( langStore );
}
this.getLang = function(){ return lang; };
this.setLang = function(l){ lang = l; storeData(options.data[l]); };
this.getItem = function(key){ return langStore[key]; };
this.setItem = function(key, value){ options.data[lang][key] = value; storeData(langStore); };
return this;
};
$.i18n.en = {
firstname: 'First Name',
lastname: 'Last Name',
message: 'Message'
};
$.i18n.de = {
firstname: 'Vorname',
lastname: 'Nachname',
message: 'Nachricht'
};
var i18n = $.i18n();
var changeLabels = function(){
$('label').each(function(){
var forLabel = $(this).attr('for');
this.innerText = i18n.getItem(forLabel);
});
};
changeLabels();
// si on modifie la valeur du select il faut mettre a jour la valeur de la variable
$('#changelocation').on('change', function(e) {
var language = $(this).val();
alert('language'+language);
...