从一页跳转到另一页时如何使用localStorage中的数据？

Question

我刚刚开始学习 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>

这是主页面。 “警报”只是在那里，所以我可以看到错误发生的地方。 从这里我尝试使用非常相似的 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 按预期工作，警报告诉我语言是我选择的语言。 但是每当我转到另一个页面时，localStorage 值就会消失，并且警报会显示“null”。 我该如何解决这个问题？

谢谢你，很抱歉发表这么长的帖子！

Answer 1

本地存储由域分隔。 例如，如果您使用 abc.com 将数据存储在本地存储中，那么它只能通过 abc.com 访问，而不能在 xyz.com 中访问。

但如果你真的想访问不同的域。 检查这个答案。