如何使用localeStorage以使语言不变?

时间:2019-10-23 12:45:16

标签: javascript jquery local-storage

我需要将某些人会选择的语言添加到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>

2 个答案:

答案 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')]);
    });
  }