Показать сообщение отдельно
  #2 (permalink)  
Старый 09.02.2025, 11:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,762

А почему именно куки?
Через localStorage можно делать

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <!-- Заголовок в зависимости от языка -->
  <title>ПРИВЕТ</title>

  <meta name="title-ru" content="ПРИВЕТ" id="title-ru">
  <meta name="title-en" content="HELLO" id="title-en">

  <style>
      /* Скрываем "не тот" язык */
    .en .ru,
    .ru .en {
      display: none;
    }

      /* Переключалки языка */
    .lang-switcher {
      border-bottom: 1px dashed;
      cursor: pointer;
    }
    .lang-switcher:hover {
      color: #b33;
    }
      /* Выделяем активную переключалку тоже с помощью классов родителя */
    .en .lang-switcher--en,
    .ru .lang-switcher--ru {
      color: #000;
      border-bottom: none;
      font-weight: bold;
      cursor: default;
    }

      /* Оформление страницы */
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 13px;
      line-height: 16px;
    }

    A.back {
      text-decoration: none;
    }

    A.back U {
      text-decoration: underline;
    }

    A:link {
      color: #0c4f72;
    }

    A:hover {
      color: #b33;
    }

    .text {
      max-width: 45em;
    }
  </style>
</head>

<body class="ru">

<p>Смените язык и обновите страницу, язык будет сохранён:</p>

<div>
  <span class="lang-switcher lang-switcher--ru" id="switcher-ru">RU</span>
  <span class="lang-switcher lang-switcher--en" id="switcher-en">EN</span>
</div>

<br>

<div class="text">
  <div class="ru" lang="ru">
    <h1>ПРИВЕТ</h1>
    текст на русском языке
  </div>

  <div class="en" lang="en">
    <h1>HELLO</h1>
    text in English
  </div>
</div>

<script>
  (function(){
    var body = document.getElementsByTagName('body')[0];

    var switcherRU = document.getElementById('switcher-ru');
    var switcherEN = document.getElementById('switcher-en');

    // Заранее считаем срок хранения кук
    //var expires = new Date();
    //expires.setDate(expires.getDate() + 366);
    //expires.toUTCString();
    var curentlang = localStorage.getItem('lang') ?? 'ru';
    localStorage.setItem('lang', curentlang);
    body.className = curentlang;

    // Русский и английский заголовки
    var titleRU = document.getElementById('title-ru');
    var titleEN = document.getElementById('title-en');
    var title = {
      ru: titleRU.getAttribute('content'),
      en: titleEN.getAttribute('content')
    }

    var switchLang = function() {
      var lang = this.id
      lang = lang.replace('switcher-', '');
	  localStorage.setItem('lang', lang);
      // Меняем класс для BODY
      body.className = lang;

      // Записываем куки
      //document.cookie = [
      //  'aplang=' + lang
      //  ,'; expires=' + expires // используем expires, max-age не поддерживается в ИЕ
      //  ,'; path=/'
      //  ,'; domain=' + document.location.host
      //].join('');
      document.title = title[lang];
    }

    switcherRU.onclick = switchLang;
    switcherEN.onclick = switchLang;
  })();
</script> 

</body>
</html>
Ответить с цитированием