你好,
我已经使用jquery编写了一个多语言网站。翻译工作完美。没有错误,但是每当我刷新浏览器或单击链接时,页面都会恢复为原始形式。
此代码来自YouTube教程,但没有说明如何向其添加Cookies或localStorage。这是我第一次这样做,这对我自己来说太难了。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arrLang = {
'pl': {
'home': 'Strona główna',
'about': 'O nas',
'contact': 'Kontakt',
'gallery': 'Galeria',
'callnow': 'Zadzwoń teraz i umów przeprowadzkę!'
},
'en': {
'home': 'Home',
'about': 'About',
'contact': 'Contact',
'gallery': 'Gallery',
'callnow': 'Call now and sign up!'
}
};
$(function() {
$('.translate').click(function() {
var lang = $(this).attr('id');
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
});
});
</script>
<button id="pl" class="translate">Polski</button>
<button id="en" class="translate">English</button>
<nav class="header-bottom-left">
<ul>
<a href="index.php#indexmain"><li class="lang" key="home">Strona główna</li></a>
<a href="about.php#indexabout"><li class="lang" key="about">O nas</li></a>
<a href="gallery.php#indexgallery"><li class="lang" key="gallery">Galeria</li></a>
<a href="contact.php#indexcontact"><li class="lang" key="contact">Kontakt</li></a>
</ul>
</nav>
您能帮我在此代码中添加localStorage或Cookies吗?这种翻译的目的对我来说很棒,因为它不会中断网站的URL。
1.首先检查本地存储中的存储语言2.保存本地存储中单击的按钮语言试图在注释中进行解释
function translateLang(lang)
{
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
}
$(function() {
//first check for stored language in localStorage i.e. fetch data from localStorage
let stored_lang = localStorage.getItem("stored_lang");
//if any then translate page accordingly
if(stored_lang != null && stored_lang != undefined)
{
lang = stored_lang;
translateLang(lang);
}
$('.translate').click(function() {
var lang = $(this).attr('id');
//on click store language to localStorage
localStorage.setItem("stored_lang",lang);
translateLang(lang);
});
});
你可以在这里玩
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句