如何使用 localeStorage 使语言不会改变？答案

【问题标题】：How to use the localeStorage so that the language doesn't change?如何使用 localeStorage 使语言不会改变？
【发布时间】：2019-10-23 23:05:30
【问题描述】：

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

【问题讨论】：

标签： javascript jquery local-storage

【解决方案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 元素的有效属性。

【讨论】：

您说得对，您还需要将存储在 localStorage 中的值更改为对象的键，而不是对象本身。我已经更新了答案，这是一个工作示例：jsfiddle.net/46y1sawv/1

【解决方案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')]);
    });
  }

【讨论】：