Бесконечная переадресация

Question

Почему происходит бесконечная переадресация на en версию?

<p><button onclick="lang()">Язык</button></p>

<script>
  function lang() {
    document.body.classList.toggle("ru");
    if (document.body.classList.contains("ru")) {
      localStorage.setItem("lang", "ru");
    } else {
      localStorage.setItem("lang", "en");
    }
  }
  var lang = localStorage.getItem("lang");
  if (lang == "ru") {
    document.location.href = 'https://***/ru/';
  } else if (lang == "en") {
    document.location.href = 'https://***/';
  }
</script>

Answer 1

            var lang = localStorage.getItem("lang");
            if (lang == "ru") {
                document.location.href = 'https://***/ru/';
            } else if (lang == "en") {
                document.location.href = 'https://***/';
            }

В этом куске кода ы проверяете язык каждый раз как заходите на страницу(скрипт запускается при каждой перезагрузке страницы) и перенаправляете, вам надо дописать, что если язык совпадает, то ничего не надо делать

let isRu = document.body.classList.contains("ru");
var lang = localStorage.getItem("lang");

if (lang == "ru" && !isRu) {
   document.location.href = 'https://***/ru/';
} else if (lang == "en" && isRu) {
   document.location.href = 'https://***/';
}

Answer 2

Почему происходит бесконечная переадресация на en версию?

Потому что ты прописал в скрипте именно такую логику: редирект выполняется и в случае когда в 'lang' сохранено значение 'ru', и в случае когда сохранено значение 'en'. При этом, скрипт записывает только эти два значения, не проверяя и не сбрасывая 'lang'.

Соответственно, работает это в точности как написано: при любом переключении языка кликом, в localStorage будет записана строка, и начнется циклично-бесконечный редирект.

Думаю что логика тут должна быть совсем другой:

Соответственно, код может быть таким (добавил комментарии справа, на случай если они будут нужны):

const checkLang = () => {
  const curLang = window.location.pathname.match(/^\/(en|ru)\//i)?.[0] || 'en',       // определяем тек. язык по пути документа
        storedLang = localStorage.getItem('lang') ?? 'en';                            // считываем сохраненный выбор языка
  if (curLang == storedLang) return;                                                  // если тек. язык соответствует сохраненному, просто прерываем выполнение функции
  const newLoc = window.location.pathname.replace(/^\/((en|ru)\/)?/i,                 // формируем новый путь документа из текущего (чтобы не "потерять" тек. страницу при редиректе)
    `/${storedLang == 'en' ? '' : storedLang + '/'}`
  );
  window.location.replace(                                                            // редирект с сохранением ориджина и query-параметров
    window.location.origin + newLoc + window.location.search
  );
};

checkLang();
document.querySelector('.toggle-lang').addEventListener('click', () => {              // обработчик клика по элементу переключения языка
  const isLangRu = document.body.classList.toggle('ru');
  localStorage.setItem('lang', isLangRu ? 'ru' : 'en');
  checkLang();
});

Answer 3

Так точно работает, но я не уверен, что это оптимальный способ.

"https://***/":

<p><button id="lang">Русский язык</button></p>
<script>
document.getElementById("lang").onclick=function(){lang()};
function lang(){
localStorage.setItem("lang","ru");
document.location.href='https://***/ru/';
}
var langlcl=localStorage.getItem("lang");
if(langlcl=="ru"){
document.location.href='https://***/ru/';
}
</script>

"https://***/ru/":

<p><button id="lang">English language</button></p>
<script>
document.getElementById("lang").onclick=function(){lang()};
function lang(){
localStorage.setItem("lang","en");
document.location.href='https://***/';
}
var langlcl=localStorage.getItem("lang");
if(langlcl=="en"){
document.location.href='https://***/';
}
</script>

БЛОГ НА HUSL

Бесконечная переадресация

Ответы (3 шт):