Hey there! Let's break down your two problems one by one and fix them up properly.

1. Why if (nickname in localStorage) Isn't Working? #

The in operator checks if a key exists in localStorage, not the value stored under those keys. Right now, you're saving nicknames under keys like username0, username1, etc. So when you run if ("John" in localStorage), it's looking for a key named exactly "John" (which doesn't exist) instead of checking if any usernameX entry has the value "John". That's why your check never triggers.

Fix for Nickname Existence Check #

Instead of checking keys directly, you need to verify if the nickname exists as a value in your stored data. A cleaner way (which we'll implement below) is to restructure your storage to use an array of user objects—this makes checking for duplicates much easier.

2. Data Overwriting & The Problem With Variable k #

The variable k lives in the browser's temporary memory, which gets reset every time you refresh the page or navigate to another page. So every time you load your app, k starts back at 0, causing you to overwrite the first user's data instead of creating new entries.

Best Implementation Approach #

Stop using a manual counter and individual keys. Instead, store all user data as a single array of objects in localStorage. This approach:

• Eliminates the need for a counter variable
• Makes checking for duplicate nicknames straightforward
• Preserves your data across page reloads and navigation

Optimized Full Code #

Here's the refactored code that fixes both issues:

// Helper to fetch all users from localStorage
function getUsers() {
  const usersJSON = localStorage.getItem('users');
  // Return empty array if no users exist yet
  return usersJSON ? JSON.parse(usersJSON) : [];
}

// Helper to save updated user list to localStorage
function saveUsers(users) {
  localStorage.setItem('users', JSON.stringify(users));
}

// Check if a nickname is already registered
function isNicknameTaken(nickname) {
  const users = getUsers();
  return users.some(user => user.nickname === nickname.trim());
}

function submit() {
  const loginForm = document.login;
  const nickname = loginForm.nickname.value.trim();

  // Basic empty field validation
  if (!nickname) {
    alert('Please enter a nickname.');
    return;
  }

  if (isNicknameTaken(nickname)) {
    alert(`The nickname ${nickname} is already in use.`);
  } else {
    const users = getUsers();
    // Add new user with empty password/email for login flow
    users.push({
      nickname: nickname,
      password: '',
      email: ''
    });
    saveUsers(users);
    alert('Nickname registered successfully!');
  }
  loginForm.reset();
}

function createaccount() {
  const registerForm = document.register;
  const nickname = registerForm.nickname.value.trim();
  const password = registerForm.password.value.trim();
  const email = registerForm.email.value.trim();

  // Basic empty field validation
  if (!nickname || !password || !email) {
    alert('Please fill in all required fields.');
    return;
  }

  if (isNicknameTaken(nickname)) {
    alert(`The nickname ${nickname} is already in use.`);
  } else {
    const users = getUsers();
    users.push({
      nickname: nickname,
      password: password,
      email: email
    });
    saveUsers(users);
    alert('Account created successfully!');
  }
  registerForm.reset();
}

function main() {
  const registerBtn = document.getElementById("next");
  const loginBtn = document.getElementById("nextlogin");

  if (registerBtn) {
    registerBtn.addEventListener("click", createaccount);
  }
  if (loginBtn) {
    loginBtn.addEventListener("click", submit);
  }
}

// Initialize when page loads
document.addEventListener("DOMContentLoaded", main);

Key Improvements Explained #

• Structured Storage: Uses a single users key to store all user data as an array of objects, so no more manual counting with k.
• Reliable Duplicate Check: The isNicknameTaken() function searches the entire user list to verify if a nickname exists.
• Data Persistence: Since we're reading/writing directly from localStorage, the user list stays intact across page reloads and navigation.
• Better UX: Added basic validation for empty fields to guide users.
• Input Sanitization: Uses .trim() to remove extra spaces from user input, preventing invalid nicknames.

Important Security Note #

Storing passwords in plain text in localStorage is a major security risk for real-world applications. Always hash passwords client-side before sending them to a server, or use secure authentication methods like OAuth. This code is suitable for learning purposes only.

内容的提问来源于stack exchange，提问作者Inês