在 Windows 本地存储中存储选定的语言答案

【问题标题】：Store selected language in windows localstorage在 Windows 本地存储中存储选定的语言
【发布时间】：2021-11-19 02:55:10
【问题描述】：

我使用 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>

如何将选定的语言存储在本地存储中？

【问题讨论】：

标签： javascript caching local-storage multilingual i18next

【解决方案1】：

我找到了解决方案。正确的代码在这里

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();

【讨论】：