在Windows本地存储中存储所选语言-前端问题

Store selected language in windows localstorage(在Windows本地存储中存储所选语言)

本文介绍了在Windows本地存储中存储所选语言的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用i18Next来本地化HTML，并且我正在尝试缓存所选的语言，以便它在页面刷新时不会后退，但无法使其工作。以下是我的代码。

<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>

<script>
    function updateContent() {
      const elements = document.getElementsByClassName("i18nelement");
      for (let i = 0; i < elements.length; i++) {
        const element = elements[i];
        const k = element.getAttribute("data-i18n");
        element.innerHTML = i18next.t(k);
      }
    }
    
    async function i18Loader() {
      const langs = ["en", "ru"];
      const jsons = await Promise.all(
        langs.map((l) => fetch("src/i18/" + l + ".json").then((r) => r.json()))
      );
      const res = langs.reduce((acc, l, idx) => {
        acc[l] = { translation: jsons[idx] };
        return acc;
      }, {});

      await i18next.init({
        lng: 'en',
        debug: true,
        resources: res,
        fallbackLng: "en-US"
      });
      updateContent();
      i18next.on("languageChanged", () => {
        updateContent();
      });
      const langSelector = document.getElementById("langSelector");
      langSelector.removeAttribute("disabled");
      langSelector.addEventListener("change", (e) => {
        i18next.changeLanguage(e.target.value);
      });
    }
    
    i18Loader();
</script>

如何在本地存储中存储所选语言？

推荐答案

我找到了解决方案。此处的正确代码

async function i18Loader() {
  const langs = ["en", "ru"];
  const jsons = await Promise.all(
    langs.map((l) => fetch("src/i18/" + l + ".json").then((r) => r.json()))
  );
  const res = langs.reduce((acc, l, idx) => {
    acc[l] = { translation: jsons[idx] };
    return acc;
  }, {});

  await i18next

    .init({
      lng: localStorage.getItem("lan") || 'en',
      debug: true,
      resources: res,
      fallbackLng: "en-US",
      backend: {
        backendOptions: [{
          // can be either window.localStorage or window.sessionStorage. Default: window.localStorage
          store: typeof window !== 'undefined' ? window.localStorage : null
        }, {
          loadPath: '/scr/i18/{{lng}}.json' // xhr load path for my own fallback
        }]
      }
    });

  function updateContent() {
    const elements = document.getElementsByClassName("i18nelement");
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i];
      const k = element.getAttribute("data-i18n");
      element.innerHTML = i18next.t(k);
    }
  }

  updateContent();
  i18next.on("languageChanged", () => {
    updateContent();
  });

  const langSelector = document.getElementById("langSelector");
  langSelector.removeAttribute("disabled");
  langSelector.addEventListener("change", (e) => {
    i18next.changeLanguage(e.target.value);
    localStorage.setItem("lan", e.target.value);
  });

}

i18Loader();

这篇关于在Windows本地存储中存储所选语言的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！