我需要将某些人会选择的语言添加到localStorage中。重新启动后,将以该语言而不是默认语言显示该页面。
当我单击按钮时,它会写入localStorage,但是它不起作用。我找不到这个决定。
let arrLang = {
'ru': {
'home-caption-p1': 'Комфортная температура помещения с',
'home-caption-color': 'экономией до 40%',
'home-caption-p2': 'за отопительные счета.',
},
'en': {
'home-caption-p1': 'Comfortable room temperature with',
'home-caption-color': 'savings of up to 40%',
'home-caption-p2': 'for heating bills.',
},
'ro': {
'home-caption-p1': 'Temperatura confortabilă a camerei cu',
'home-caption-color': 'economii de până la 40%',
'home-caption-p2': 'pentru facturile de încălzire.',
}
};
// Multi-language changes
$(function() {
$('.translate').click(function() {
let lang = $(this).attr('id');
$('.lang').each(function() {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
localStorage.setItem('lang', arrLang[lang]);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns d-flex">
<button class="btn translate" id="ru" href="#about">ru</button>
<button class="btn translate" id="en">en</button>
<button class="btn translate" id="ro">ro</button>
</div>
<h3 class="lang">
<span class="lang" key="home-caption-p1">Comfortable room temperature with</span>
<span class="lang color" key="home-caption-color">savings of up to 40%</span>
<span class="lang" key="home-caption-p2">for heating bills.</span>
</h3>
答案 0 :(得分:0)
您在localStorage中设置了该值,但是您再也没有读出来。为了按照您的描述进行操作,您需要使用getItem()
来检查语言(如果已设置)并显示。
function translate(language) {
$('.lang').each(function() {
$(this).text(arrLang[language][$(this).data('key')]);
});
}
jQuery(function($) {
// translate the page onload if a language was previously selected
var language = localStorage.getItem('lang');
if (language)
translate(language);
// translate the page when a language is clicked
$('.translate').click(function() {
let lang = $(this).attr('id');
translate(lang);
localStorage.setItem('lang', lang);
});
});
还要注意,我将key
更改为data-key
,因为前者不是span
元素的有效属性。
答案 1 :(得分:0)
实际上,您在刷新页面时永远不会从本地存储中获取存储的语言。
我已对代码进行了一些更改,以加载默认语言,请复习一下是否可能对您有所帮助。
let arrLang = {
'ru': {
'home-caption-p1': 'Комфортная температура помещения с',
'home-caption-color': 'экономией до 40%',
'home-caption-p2': 'за отопительные счета.',
},
'en': {
'home-caption-p1': 'Comfortable room temperature with',
'home-caption-color': 'savings of up to 40%',
'home-caption-p2': 'for heating bills.',
},
'ro': {
'home-caption-p1': 'Temperatura confortabilă a camerei cu',
'home-caption-color': 'economii de până la 40%',
'home-caption-p2': 'pentru facturile de încălzire.',
}
};
// Multi-language changes
let lang = 'en';;
$(function() {
if(localStorage.getItem('lang'))
{
lang = localStorage.getItem('lang')
loadLangage();
}
$('.translate').click(function() {
lang = $(this).attr('id');
loadLangage();
localStorage.setItem('lang', lang);
});
});
function loadLangage(){
$('.lang').each(function() {
if(arrLang[lang] == undefined)
lang = 'en';
$(this).text(arrLang[lang][$(this).attr('key')]);
});
}