网站上的翻译按钮-保存用户的语言偏好设置

时间:2018-11-18 23:53:52

标签: javascript html css

因此,由于我的JavaScript技能有限,我创建了一个简单的翻译按钮。当您单击按钮时,它会将您正在访问的网页上的文本更改为英语或中文。

当有人转到不同的网页甚至刷新页面时,我将如何保留这些更改?我已经尝试过使用localStorage技术,但是没有运气。

这是我的翻译按钮的JS代码:

// onclick behavior
$('.lang').click('touchstart', function() {
  var lang = $(this).attr('id'); // obtain language id

  // translate all translatable elements
  $('.tr').each(function(i) {
    $(this).text(aLangKeys[lang][$(this).attr('key')]);
  });

});

// preparing language file
var aLangKeys = new Array();

aLangKeys['en'] = new Array();
aLangKeys['ch'] = new Array();

aLangKeys['en']['home'] = 'Home';
aLangKeys['en']['about'] = 'About Us';
aLangKeys['en']['serv'] = 'Services';
aLangKeys['en']['sem'] = 'Search Engine Marketing';
aLangKeys['en']['webdev'] = 'Website Development';

aLangKeys['ch']['home'] = '首页';
aLangKeys['ch']['about'] = '关于我们';
aLangKeys['ch']['serv'] = '服务';
aLangKeys['ch']['sem'] = '谷歌与雅虎推广';

对于本地存储,我已经在var = aLangKeys = new array下添加了此权限。

localStorage.setItem("aLangKeys", aLangKeys);
var someVarName = localStorage.getItem("aLangKeys");

谢谢!

1 个答案:

答案 0 :(得分:1)

LocalStorage仅允许存储字符串,因此在获取和设置时需要使用JSON.stringify()JSON.parse()

但是首先,您不应该对非数字键使用new Array()。你真正在做的是在做一个类似对象的数组

更改为:

var aLangKeys = {
     en :{},
     ch: {}
}; 
// .... other definitions

要设置

localStorage.setItem("aLangKeys", JSON.stringify(aLangKeys));

获得

var someVarName = JSON.parse(localStorage.getItem("aLangKeys"));