Chupachar
@Chupachar
front-end dev

Как решить проблему с сохранением выбранного языка при смене языка на мобильных устройствах?

Всем привет, в проекте смена языка осуществляется за счет данной функции:
function initializeSelectLang() {
      const selectLang = document.querySelector("#select-lang");
      const storageKey = "selectedIndexLang";
      if (!localStorage.getItem(storageKey)) {
        localStorage.setItem(storageKey, 2); //2 === дефолтный язык допустим турецкий, всего 0, 1, 2
      }
      selectLang.addEventListener("change", function() {
        let lang = selectLang.value.split("/").pop();
        const urlLang = `${route("ChangeLanguage", lang)}`;
        console.log("selectLang.value: ", lang);
        fetch(urlLang, options)
          .then((response) => response.text())
          .then(() => {
            window.location = this.value;
          })
          .catch((error) => alert("lang error: ", error));

        localStorage.setItem(storageKey, this.selectedIndex);
      });

      if (localStorage.getItem(storageKey)) {
        selectLang.selectedIndex = localStorage.getItem(storageKey);
      }
    }
    initializeSelectLang();

Так же в cookie с backend записывается определенное закодированное значение, по умолчанию которое === 2 (турецкий). На десктопе всё работает отлично, с backend получаю дефолтный язык === 2 и ЛХ записываю так же 2, всё синхронизировано, выбрал пользователь английский === 1 (английский), язык поменялся и сохраняется при закрытии вкладки браузера или же при закрытии браузера и открытии. Проблема касается мобильных устройств, язык так же меняется и сохраняется но если я выберу 1 (английский) закрою браузер на моб и открою, то язык будет по какой то причине станет дефолтным 2 (турецкий) а select будет ENG, определенно в ЛХ будет 1, а в cookie обновится на дефолт 2 и непонятно.
В двух словах:
Десктоп - при смене языка на ENG и закрытии вкладки браузера или самого браузера и открытии, сохранится язык (английский) и выбранный селект ENG.
Моб - при смене языка на ENG и закрытии вкладки браузера или самого браузера и открытии, язык станет дефолтным (турецкий) и выбранный селект ENG.
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
Aetae
@Aetae Куратор тега JavaScript
Тлен
Вопрос в том что ты там закрываешь и открывешь, что у тебя в {{Route('ChangeLanguage', N)}}?
Если там что-то вида /en и /tr то у тебя будет открываться собственно та версия, которая сохранена в закладках\истории, а не так которая была выбрана.

Почему? Потому что твой код не предусматривает автоматическую смену адреса при загрузке, только при выборе.
Если ты ожидал, что
selectLang.selectedIndex = localStorage.getItem(storageKey);
вызовет change автоматически - это не так, программная смена не вызывает событий.

Теперь о самом коде:
1. Нахрена там fetch? Ты зачем-то грузишь страницу в воздух, после чего переключаешь на неё.
2. Весь код в принципе хрень. Перенаправление на нужный язык должно происходить на сервере. Если нужен выбор на клиенте с запоминанием - используй куки и читай эти куки на сервере.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы