자바스크립트 Local Storage를 이용한 웹 사이트 로그인 기능 구현

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트의 Local Storage를 활용하여 간단한 웹 사이트 로그인 기능을 구현하는 방법에 대해 알아보겠습니다. 로그인 기능은 많은 웹 사이트에서 필수적인 기능 중 하나이며, Local Storage는 클라이언트 측에서 데이터를 저장하는 메커니즘을 제공해줍니다.

Local Storage란?

Local Storage는 웹 브라우저에서 키-값 쌍으로 데이터를 저장하고, 이를 이용해 세션에 필요한 데이터를 관리할 수 있는 웹 스토리지 기술입니다. Local Storage는 사용자가 브라우저를 닫거나 재시작해도 데이터가 유지되므로, 영구적으로 정보를 저장할 수 있습니다.

로그인 기능 구현

HTML 구조 작성

먼저, 로그인 폼과 회원가입 폼을 갖는 HTML 구조를 작성합니다. 각 폼은 사용자의 아이디와 비밀번호를 입력받는 요소들로 구성됩니다.

<form id="login-form">
  <input type="text" id="username" placeholder="아이디">
  <input type="password" id="password" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

<form id="register-form">
  <input type="text" id="new-username" placeholder="아이디">
  <input type="password" id="new-password" placeholder="비밀번호">
  <button type="submit">회원가입</button>
</form>

자바스크립트 코드 작성

다음으로, 로그인 폼과 회원가입 폼의 데이터를 처리하는 자바스크립트 코드를 작성합니다.

// 로그인 폼 제출 이벤트 핸들러
document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 폼 제출 기본 동작 막기

  // 입력한 아이디와 비밀번호 가져오기
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  // Local Storage에서 저장된 데이터 가져오기
  var savedUsername = localStorage.getItem('username');
  var savedPassword = localStorage.getItem('password');

  // 입력한 아이디와 비밀번호가 Local Storage에 저장된 데이터와 일치하는지 확인
  if (username === savedUsername && password === savedPassword) {
    alert('로그인 성공');
  } else {
    alert('아이디 또는 비밀번호를 확인해주세요');
  }
});

// 회원가입 폼 제출 이벤트 핸들러
document.getElementById('register-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 폼 제출 기본 동작 막기

  // 입력한 아이디와 비밀번호 가져오기
  var newUsername = document.getElementById('new-username').value;
  var newPassword = document.getElementById('new-password').value;

  // 입력한 아이디와 비밀번호 Local Storage에 저장하기
  localStorage.setItem('username', newUsername);
  localStorage.setItem('password', newPassword);

  alert('회원가입 성공');
});

위 코드에서는 로그인 폼 제출 시 입력한 아이디와 비밀번호를 Local Storage에서 가져와 저장된 데이터와 비교합니다. 회원가입 폼 제출 시에는 입력한 데이터를 Local Storage에 저장합니다.

결론

이렇게 자바스크립트의 Local Storage를 활용하여 간단한 웹 사이트 로그인 기능을 구현할 수 있습니다. 로그인 기능은 보안에 주의해야 하므로, 실제로 사용할 때는 보안을 강화하는 추가적인 방법들을 고려해야 합니다.

#javascript #login #local-storage