從本地存儲到 HTML 頁面的顯示名稱

Question

我希望我的 html 頁面將顯示“歡迎”和本地存儲中的用戶名。 我在本地存儲中有名稱，但我不知道如何在 HTML 頁面中顯示它

.js 文件：

//register
function store(){
    event.preventDefault();
    var name = document.getElementById('name').value;
    var pw = document.getElementById('pw').value;
    ...
    const user = { name: name, pw: pw};
    const userObjectString = JSON.stringify(user);
    localStorage.setItem(name, userObjectString);
    window.location = "./user.html";
    alert('Your account has been created');
  }
 //login
 function check(){
        event.preventDefault();
        var userName = document.getElementById('userName').value;
        var userPw = document.getElementById('userPw').value;
        var userObjectString = window.localStorage.getItem(userName);
        if (!userObjectString && userName != "gk" && userPw != "123") {
            alert('Error on login');
        } else {
            var user = JSON.parse(userObjectString);
            if(userName == user.name && userPw == user.pw){
                alert('You are logged in.');
                window.location = "./user.html";
            } else {
                alert('Error on login');
            }
         }
       }

Answer 1

您需要 localStorage 鍵中的引號並使用 textContent 來阻止可能的 XSS：

localStorage.setItem("name", userObjectString); 

那么你可以做

const obj = JSON.parse(localStorage.getItem("name") || \`{}\`);
if (obj && obj.name) document.querySelector("h1").textContent += obj.name;

假設你有

<h1>Welcome</h1>

請注意，您可能需要在保存名稱之前對其進行清理