Нужна помощь с куками
Как сделать чтение куки с помощью JS?
Есть такая страница - перевод без перезагрузки страницы. Всё работает, кроме одного момента: если человек выбрал EN, то при перезагрузке страницы EN не запоминается. А нужно чтобы при смене языка и обновлении страницы сохранялся выбранный язык. Есть решение на PHP, но это не подходит, ибо всё это должно размещаться на HTML странице. Я без понятия как это сделать. В таком виде можно, конечно, оставить, но не комильфо... Будьте так любезны, решите эту проблему, если, конечно, это вообще возможно)
<!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 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-', '');
// Меняем класс для 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>
|
А почему именно куки?
Через 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>
|
Работает!! :dance: Гениально)
Просто нашел вариант с куками на php, но он не подходил, поэтому и возникла необходимосnь сделать тоже самое, но без php, а как именно - без разницы)) Спасибо Вам огромное, премного благодарен :thanks: |
Цитата:
https://learn.javascript.ru/cookie |
| Часовой пояс GMT +3, время: 12:13. |