[javascript] 자바스크립트로 로그인 이력 관리하기

08 Dec 2023

javascript

이번 포스팅에서는 자바스크립트를 사용하여 웹 애플리케이션에서 로그인 이력을 관리하는 방법에 대해 알아보겠습니다.

1. 로컬 스토리지 활용

로그인 이력을 관리하기 위해 로컬 스토리지를 사용할 수 있습니다. 먼저, 사용자가 로그인할 때마다 로컬 스토리지에 로그인 정보를 저장합니다. 아래는 간단한 예제 코드입니다.

// 로그인 시 로컬 스토리지에 정보 저장
function saveLoginHistory(username) {
  let loginHistory = localStorage.getItem('loginHistory');
  if (!loginHistory) {
    loginHistory = [];
  } else {
    loginHistory = JSON.parse(loginHistory);
  }
  loginHistory.push({
    username: username,
    timestamp: new Date().getTime()
  });
  localStorage.setItem('loginHistory', JSON.stringify(loginHistory));
}

2. 로그인 이력 확인

다음으로는 저장된 로그인 이력을 확인하는 방법입니다. 웹 애플리케이션에서 관리자가 로그인 이력을 확인할 수 있는 기능을 추가할 수 있습니다.

// 저장된 로그인 이력 확인
function getLoginHistory() {
  let loginHistory = localStorage.getItem('loginHistory');
  if (loginHistory) {
    return JSON.parse(loginHistory);
  } else {
    return [];
  }
}

3. 로그아웃 시 로그인 이력 업데이트

마지막으로, 사용자가 로그아웃할 때마다 저장된 로그인 이력을 업데이트하는 것이 좋습니다.

// 로그아웃 시 로그인 이력 업데이트
function updateLogoutHistory(username) {
  let loginHistory = localStorage.getItem('loginHistory');
  if (loginHistory) {
    loginHistory = JSON.parse(loginHistory);
    loginHistory = loginHistory.map(item => {
      if (item.username === username) {
        item.logoutTimestamp = new Date().getTime();
      }
      return item;
    });
    localStorage.setItem('loginHistory', JSON.stringify(loginHistory));
  }
}

이상으로, 자바스크립트를 사용하여 웹 애플리케이션에서 로그인 이력을 관리하는 방법에 대해 알아보았습니다. 로컬 스토리지를 활용하여 간단하게 로그인 이력을 저장하고 확인할 수 있습니다.

관련 참고 자료: MDN web docs - Local Storage