如何实现LogIn/SignUp页面及对应JS文件间的变量互通？

Great question! Let's start by clearing up a key point first: you can't directly access variables or functions from signUp.js in LogIn.js once you navigate between the two pages. When you jump from signUp.html to LogIn.html, the browser loads a completely new page context—all variables from the previous page's JS are destroyed.

But don't worry, there are simple, reliable ways to pass the username and password from the sign-up page to the login page. Here are the most common approaches:

1. Use localStorage (Recommended) #

localStorage lets you store small amounts of data in the browser that persists even after page reloads or navigation. It's perfect for this use case because it's secure enough for temporary credential pre-filling and easy to implement.

Step 1: Save credentials in signUp.js when submitting #

// Your existing sign-up submit handler
function handleSignUpSubmit() {
  // Get user input values (adjust IDs to match your HTML)
  const username = document.getElementById('signup-username').value;
  const password = document.getElementById('signup-password').value;
  
  // Store the values in localStorage
  localStorage.setItem('tempUsername', username);
  localStorage.setItem('tempPassword', password);
  
  // Navigate to login page
  window.location.href = 'LogIn.html';
}

Step 2: Retrieve and fill values in LogIn.js on page load #

// Run code when the login page finishes loading
window.addEventListener('DOMContentLoaded', () => {
  // Get stored values from localStorage
  const savedUsername = localStorage.getItem('tempUsername');
  const savedPassword = localStorage.getItem('tempPassword');
  
  // Fill the login inputs if values exist
  if (savedUsername) {
    document.getElementById('login-username').value = savedUsername;
    // Remove the stored value so it doesn't pre-fill next time
    localStorage.removeItem('tempUsername');
  }
  if (savedPassword) {
    document.getElementById('login-password').value = savedPassword;
    localStorage.removeItem('tempPassword');
  }
});

2. Use URL Parameters (Not Recommended for Passwords) #

You can append credentials to the login page URL as query parameters. Note: This is unsafe for passwords because the password will be visible in the browser's address bar and browser history. Only use this for the username if you prefer it over localStorage.

Step 1: Append parameters in signUp.js #

function handleSignUpSubmit() {
  const username = document.getElementById('signup-username').value;
  const password = document.getElementById('signup-password').value;
  
  // Encode values to handle special characters (like spaces or symbols)
  const encodedUsername = encodeURIComponent(username);
  const encodedPassword = encodeURIComponent(password);
  
  // Navigate to login page with parameters
  window.location.href = `LogIn.html?username=${encodedUsername}&password=${encodedPassword}`;
}

Step 2: Parse parameters in LogIn.js #

window.addEventListener('DOMContentLoaded', () => {
  // Get the URL parameters
  const urlParams = new URLSearchParams(window.location.search);
  const username = urlParams.get('username');
  const password = urlParams.get('password');
  
  // Fill inputs if parameters exist
  if (username) {
    document.getElementById('login-username').value = decodeURIComponent(username);
  }
  if (password) {
    document.getElementById('login-password').value = decodeURIComponent(password);
  }
});

3. Use Cookies (For More Advanced Scenarios) #

Cookies are another option, useful if you need the data to persist across browser sessions or have specific expiration rules. They're a bit more code-heavy but work reliably.

Step 1: Set cookies in signUp.js #

// Helper function to set a cookie
function setCookie(name, value, hours = 1) {
  const date = new Date();
  date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
}

function handleSignUpSubmit() {
  const username = document.getElementById('signup-username').value;
  const password = document.getElementById('signup-password').value;
  
  // Set cookies with temporary expiration
  setCookie('tempUsername', username);
  setCookie('tempPassword', password);
  
  window.location.href = 'LogIn.html';
}

Step 2: Read and clear cookies in LogIn.js #

// Helper function to get a cookie
function getCookie(name) {
  const nameEQ = `${name}=`;
  const cookieArray = document.cookie.split(';');
  
  for (let cookie of cookieArray) {
    cookie = cookie.trim();
    if (cookie.startsWith(nameEQ)) {
      return decodeURIComponent(cookie.substring(nameEQ.length));
    }
  }
  return null;
}

window.addEventListener('DOMContentLoaded', () => {
  const username = getCookie('tempUsername');
  const password = getCookie('tempPassword');
  
  if (username) {
    document.getElementById('login-username').value = username;
    // Clear the cookie
    document.cookie = 'tempUsername=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  }
  if (password) {
    document.getElementById('login-password').value = password;
    document.cookie = 'tempPassword=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
  }
});

Final Notes #

• Avoid direct cross-page variable access: As mentioned earlier, this isn't possible because each page has its own isolated JS context.
• Security reminder: Storing passwords in localStorage or cookies is temporary and safe for pre-filling, but never store sensitive data long-term in these places. Always hash passwords before storing them in a database for real applications.

内容的提问来源于stack exchange，提问作者Aniket Jadhav