I am just starting to learn JavaScript, and what I am trying to do now is the following: So, I created a small site with HTML/CSS, and now I am implementing a language-switcher (English/Romanian). When the language is changed, how can I make it stay that way when moving to another HTML page, from the main one?
<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>
This is the main page. The "alerts" are only there so I can see where the error occurs. From here I am trying to go to the "New" page, with a really similar JS code:
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>
So, THE PROBLEM: When I stay on the same page it is ok. LocalStorage works as expected and the alerts tell me the language is the one I have chosen. But whenever I go to another page, the localStorage value dissapears, and the alerts say "null". How can I solve this?
Thank you and sorry for the long post!
