[英]How can I use data in localStorage when jumping from one page to another?
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).我刚刚开始学习 JavaScript,现在我想做的是以下内容:所以,我用 HTML/CSS 创建了一个小站点,现在我正在实现一个语言切换器(英语/罗马尼亚语)。 When the language is changed, how can I make it stay that way when moving to another HTML page, from the main one?更改语言后,如何在从主页面移动到另一个 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>
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:从这里我尝试使用非常相似的 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>
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. LocalStorage 按预期工作,警报告诉我语言是我选择的语言。 But whenever I go to another page, the localStorage value dissapears, and the alerts say "null".但是每当我转到另一个页面时,localStorage 值就会消失,并且警报会显示“null”。 How can I solve this?我该如何解决这个问题?
Thank you and sorry for the long post!谢谢你,很抱歉发表这么长的帖子!
Local storage is separated by domain.本地存储由域分隔。 For example, if you have stored data in local storage using abc.com then it can only be accessible by abc.com you cannot access this in xyz.com.例如,如果您使用 abc.com 将数据存储在本地存储中,那么它只能通过 abc.com 访问,而不能在 xyz.com 中访问。
But if you really want to access different domains.但如果你真的想访问不同的域。 Check this answer .检查这个答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.