如何存儲變量的內容供以后在其他函數中使用 (Javascript)

Question

我一直在嘗試用 JS 制作一個簡單的注冊/登錄系統。 我試圖通過用戶輸入獲取用戶名/密碼值，並使用 register() 函數將它們轉換為變量。 然而，在那之后，這些變量不再具有任何值，我需要將它們與新的登錄用戶名/密碼進行比較，以檢查它們是否匹配才能登錄。

這是我試過的。

下面的函數成功地將用戶的輸入歸因於相應的變量。 ID 來自 HTML 文件中的文本輸入。

function register () {
    var user1 = window.document.getElementById('username')
    var pass1 = window.document.getElementById('password')
    alert('User registered, user your credentials to login')
}

當我點擊 html 頁面中的“注冊”按鈕時，該函數被調用 (onclick="register()")，我被重定向到登錄頁面。

這是登錄會話的代碼：

function login () {
    let userL = window.document.getElementById('usernameL')
    let passL = window.document.getElementById('passwordL')

    if (userL === user1 && passL === pass1) {
        alert(`${userL} successfully logged`)
    }

    else {
        alert('Invalid credentials')
    }

它不起作用，因為根據控制台，在上面的代碼中，user1 和 pass1 是“未定義的”。 在第一個函數（注冊）中獲取這些變量的值后，如何保存這些變量的值，以便在使用第二個函數（登錄）時使用它們？

Answer 1

您可以使用會話存儲來存儲臨時數據

sessionStorage.setItem('username',username);

sessionStorage.setItem('password',password);

檢索登錄頁面中的數據

var user1 = sessionStorage.getItem('username',username);

var pass1 = sessionStorage.getItem('password',password);

然后清除

sessionStorage.clear();

Answer 2

請參考以下代碼，

<script>
      const allUsers = [];

      function register() {
        // assuming user1 && pass1 are input elements with ids username, password
        var user1 = document.getElementById("username").value;
        var pass1 = document.getElementById("password").value;
        // TODO: always validate the data that is taken as input from the user

        // create an object containing user details
        const newUser = {
          username: user1,
          password: pass1,
        };

        // push the registered user in allUsers array
        allUsers.push(newUser);
        alert("User registered, user your credentials to login");
      }

      function login() {
        // assuming user1 && pass1 are input elements with ids usernameL, passwordL
        let userL = document.getElementById("usernameL").value;
        let passL = document.getElementById("passwordL").value;

        // TODO: always validate the data that is taken as input from the user

        // loop through allUsers array to check whether we already have a user registered with the details given in login form
        for(let user of allUsers) {
          if(user.username === userL && user.password === passL) {
            alert(`${userL} successfully logged`);
            return; // exit the function here
          }
        }

        // if user detail not found in allUsers array this alert will be executed
        alert("Invalid credentials");
      }
    </script>

• 注冊成功后將所有用戶存入數組
• 登錄時，循環遍歷已注冊的用戶數組，檢查用戶是否已經注冊，並決定如何處理邏輯。
• 正如 PM 77-1 在評論中提到的，請注意 getElementById(ID) 返回元素本身（標簽本身），如果我們想訪問它的文本內容，我們可以使用getElementById(ID).textContent或getElementById(ID).innerText