자바스크립트 Local Storage를 활용한 회원가입 및 로그인 처리

15 Sep 2023

javascript

회원가입과 로그인은 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. 이 기능을 구현하는 가장 간단하고 효과적인 방법 중 하나는 자바스크립트의 Local Storage를 활용하는 것입니다.

Local Storage란?

Local Storage는 웹 브라우저에서 제공하는 기능으로, 웹 애플리케이션에서 데이터를 클라이언트 로컬에 저장할 수 있게 합니다. Local Storage는 키-값 쌍을 저장하고, 저장된 데이터는 웹 브라우저를 닫았다가 다시 열어도 계속해서 유지됩니다.

회원가입 처리

먼저 회원가입을 처리하는 방법에 대해 알아보겠습니다. 양식을 작성한 후 제출 버튼을 누르면 입력한 정보를 Local Storage에 저장합니다. 예를 들어, 아래와 같은 코드를 작성할 수 있습니다.

const registerForm = document.querySelector('#registerForm');

registerForm.addEventListener('submit', function(event) {
  event.preventDefault();

  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;

  // 입력한 정보를 Local Storage에 저장
  localStorage.setItem('username', username);
  localStorage.setItem('password', password);

  alert('회원가입이 완료되었습니다. 로그인해주세요.');
});

위 코드에서 registerForm은 회원가입 양식을 감싸고 있는 폼 요소를 나타냅니다. 이벤트 리스너를 등록하여 폼이 제출될 때의 동작을 처리합니다. 사용자가 입력한 아이디와 비밀번호를 Local Storage에 저장한 후, 성공적으로 회원가입되었다는 알림을 표시합니다.

로그인 처리

이번에는 저장된 회원 정보를 활용하여 로그인을 처리하는 방법에 대해 알아보겠습니다. 회원가입 시 저장했던 아이디와 비밀번호를 입력하여 로그인 버튼을 클릭하면, 입력한 정보와 저장된 정보를 비교합니다. 예를 들어, 아래와 같은 코드를 작성할 수 있습니다.

const loginForm = document.querySelector('#loginForm');

loginForm.addEventListener('submit', function(event) {
  event.preventDefault();

  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;

  // Local Storage에서 회원 정보 조회
  const savedUsername = localStorage.getItem('username');
  const savedPassword = localStorage.getItem('password');

  if (username === savedUsername && password === savedPassword) {
    alert('로그인 성공!');
    // 로그인 성공 후 이동할 페이지로 리다이렉트
  } else {
    alert('아이디 또는 비밀번호가 일치하지 않습니다.');
  }
});

위 코드에서 loginForm은 로그인 양식을 감싸고 있는 폼 요소를 나타냅니다. 이벤트 리스너를 등록하여 폼이 제출될 때의 동작을 처리합니다. 입력한 아이디와 비밀번호를 Local Storage에서 조회한 후, 입력한 정보와 일치하는지를 비교하여 로그인의 성공 여부를 판단합니다.

위의 코드를 활용하여 회원가입과 로그인 처리를 자바스크립트로 구현할 수 있습니다. 자바스크립트 Local Storage를 활용하면 데이터를 클라이언트 로컬에 저장하여 간단하게 회원가입과 로그인을 처리할 수 있습니다.

#javascript #localstorage #회원가입 #로그인