Question

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

Answer 1

您在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元素的有效属性。

Answer 2

实际上，您在刷新页面时永远不会从本地存储中获取存储的语言。

我已对代码进行了一些更改，以加载默认语言，请复习一下是否可能对您有所帮助。

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

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

2 个答案: