從一頁跳轉到另一頁時如何使用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 中訪問。

但如果你真的想訪問不同的域。 檢查這個答案。