Я только начинаю изучать JavaScript, и сейчас я пытаюсь сделать следующее: Итак, я создал небольшой сайт с HTML / CSS, и теперь я реализую переключатель языка (английский /Румынский). Когда язык меняется, как я могу сделать так, чтобы он оставался таким же при переходе на другую HTML страницу, с основной?
<script>
var data = {
"english":
{
"acasa": "Home",
"noutati": "New",
"lucrare": "My thesis",
"student": "Student profile",
"coordonator": "Supervisor",
"limba": "Language"
},
"romanian":
{
"acasa": "Acasă",
"noutati": "Noutăți",
"lucrare": "Despre lucrare",
"student": "Profil student",
"coordonator": "Coordonator",
"limba": "Limbă"
}
}
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const acasaEl = document.querySelector('#acasa');
const noutatiEl = document.querySelector('#noutati');
const lucrareEl = document.querySelector('#lucrare');
const studentEl = document.querySelector('#student');
const coordonatorEl = document.querySelector('#coordonator');
const limbaEl = document.querySelector('#limba');
var language = localStorage.getItem('language');
alert(language);
alert(localStorage.getItem('language'));
if(language==null || language=="null")
{localStorage.setItem('language', 'romanian');
language = 'romanian';}
alert(language);
alert(localStorage.getItem('language'));
acasaEl.textContent = data[language].acasa;
noutatiEl.textContent = data[language].noutati;
lucrareEl.textContent = data[language].lucrare;
studentEl.textContent = data[language].student;
coordonatorEl.textContent = data[language].coordonator;
limbaEl.textContent = data[language].limba;
link.forEach(el => {
el.addEventListener('click', () => {
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
localStorage.setItem('language', attr);
acasaEl.textContent = data[attr].acasa;
noutatiEl.textContent = data[attr].noutati;
lucrareEl.textContent = data[attr].lucrare;
studentEl.textContent = data[attr].student;
coordonatorEl.textContent = data[attr].coordonator;
limbaEl.textContent = data[attr].limba;
});
});
</script>
Это главная страница. «Предупреждения» только там, чтобы я мог видеть, где происходит ошибка. Отсюда я пытаюсь go перейти на «Новую» страницу с действительно похожим JS кодом:
var data = {
"english":
{
"title": "New",
"acasa": "Home",
"noutati": "New",
"lucrare": "My thesis",
"student": "Student profile",
"coordonator": "Supervisor",
"limba": "Language",
"content": "An important source we can use for a better understanding of Roman architecture and room functionality is represented by the city of Pompeii, Italy. The city has been destroyed in 79 AD after the eruptions of Mount Vesuvius, but it has been preserved underneath the volcanic ash along the centuries.",
"more": "The most recent descoveries can be seen on the official website:",
"link": "Pompeii Regio V excavations"
},
"romanian":
{
"title": "Noutăți",
"acasa": "Acasă",
"noutati": "Noutăți",
"lucrare": "Despre lucrare",
"student": "Profil student",
"coordonator": "Coordonator",
"limba": "Limbă",
"content": "O sursă importantă pe care o avem pentru a înțelege mai bine arhitectura și funcționalitatea încăperilor romane, o reprezină orașul Pompeii din Italia. Acesta a fost distrus în anul 79 AD în urma erupției Vezuviului, însă a fost prezervat de-a lungul secolelor sub cenușa vulcanică.",
"more": "Cele mai recente descoperiri pot fi văzute pe site-ul oficial:",
"link": "Săpăturile din Regio V Pompeii"
}
}
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const titleEl = document.querySelector('.title');
const acasaEl = document.querySelector('#acasa');
const noutatiEl = document.querySelector('#noutati');
const lucrareEl = document.querySelector('#lucrare');
const studentEl = document.querySelector('#student');
const coordonatorEl = document.querySelector('#coordonator');
const limbaEl = document.querySelector('#limba');
const contentEl = document.querySelector('.content');
const moreEl = document.querySelector('.more');
const linkEl = document.querySelector('#link');
var language = localStorage.getItem('language');
alert(language);
alert(localStorage.getItem('language');
if(language==null || language=="null")
{localStorage.setItem('language', 'romanian');
language = 'romanian';}
alert(language);
alert(localStorage.getItem('language'));
titleEl.textContent = data[language].title;
acasaEl.textContent = data[language].acasa;
noutatiEl.textContent = data[language].noutati;
lucrareEl.textContent = data[language].lucrare;
studentEl.textContent = data[language].student;
coordonatorEl.textContent = data[language].coordonator;
limbaEl.textContent = data[language].limba;
contentEl.textContent = data[language].content;
moreEl.textContent = data[language].more;
linkEl.textContent = data[language].link;
link.forEach(el => {
el.addEventListener('click', () => {
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
localStorage.setItem('language', attr);
titleEl.textContent = data[attr].title;
acasaEl.textContent = data[attr].acasa;
noutatiEl.textContent = data[attr].noutati;
lucrareEl.textContent = data[attr].lucrare;
studentEl.textContent = data[attr].student;
coordonatorEl.textContent = data[attr].coordonator;
limbaEl.textContent = data[attr].limba;
contentEl.textContent = data[attr].content;
moreEl.textContent = data[attr].more;
linkEl.textContent = data[attr].link;
});
});
</script>
Итак, ПРОБЛЕМА: Когда я остаюсь на той же странице, это нормально. LocalStorage работает, как и ожидалось, и оповещения говорят, что я выбрал язык. Но всякий раз, когда я go перехожу на другую страницу, значение localStorage исчезает, а оповещения говорят "ноль". Как я могу решить это?
Спасибо и простите за длинный пост!