자바스크립트 세션 상태 추적 기능

10 Sep 2023

javascript

자바스크립트를 사용하여 웹 애플리케이션을 개발할 때, 세션 상태를 추적하는 기능은 매우 중요합니다. 세션 상태 추적 기능을 통해 사용자의 로그인 상태, 장바구니 정보 등을 유지하고 관리할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 세션 상태 추적 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 세션 상태 추적 기능을 위한 쿠키 사용

가장 간단한 방법 중 하나는 쿠키를 사용하여 세션 상태를 추적하는 것입니다. 쿠키는 웹 브라우저에 저장되는 작은 텍스트 파일로, 사용자의 로그인 상태나 장바구니 정보 등을 저장할 수 있습니다.

// 쿠키 설정 함수
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 쿠키 가져오기 함수
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

// 쿠키 제거 함수
function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

위의 코드는 쿠키를 설정하고 가져오는 함수와 쿠키를 제거하는 함수를 정의한 예제입니다. setCookie 함수를 사용하여 세션 상태 값을 설정하고, getCookie 함수를 사용하여 세션 상태 값을 가져올 수 있습니다. deleteCookie 함수를 사용하여 세션 상태 값을 제거할 수도 있습니다.

2. 세션 상태 관리하기

세션 상태를 추적하기 위해 쿠키를 사용하는 방법을 알았습니다. 이제 이러한 세션 상태를 활용하여 로그인 상태나 장바구니 정보를 관리해봅시다.

// 로그인 상태 유지하기
function setLoggedInState() {
  setCookie("isLoggedIn", true, 7); // 7일 동안 유지
}

function isLoggedIn() {
  return getCookie("isLoggedIn") === "true";
}

function logout() {
  deleteCookie("isLoggedIn");
}

위의 코드는 로그인 상태를 유지하기 위한 함수 예제입니다. setLoggedInState 함수를 호출하여 로그인 상태를 설정하고 isLoggedIn 함수를 사용하여 현재 로그인 상태를 확인할 수 있습니다. logout 함수를 사용하여 로그아웃 상태로 설정할 수도 있습니다.

이와 마찬가지로 장바구니 정보 등 다른 세션 상태도 쿠키를 활용하여 관리할 수 있습니다.

3. 세션 상태 추적 기능 활용하기

위에서 구현한 세션 상태 추적 기능을 활용하여 웹 애플리케이션의 다양한 기능을 개발할 수 있습니다. 예를 들어, 로그인 상태인 경우에만 특정 페이지를 접근할 수 있도록 막는다거나, 장바구니 기능을 개발할 때 세션 상태 값을 활용하여 장바구니 정보를 유지할 수 있습니다.

// 로그인 상태인 경우에만 접근 가능한 페이지인지 확인하는 함수
function checkLoggedInAccess() {
  if (!isLoggedIn()) {
    // 로그인이 필요한 경고 메시지 출력
    alert("로그인이 필요한 페이지입니다.");
    // 로그인 페이지로 리다이렉트
    window.location.href = "/login";
  }
}

// 장바구니에 상품 추가하기
function addToCart(item) {
  if (isLoggedIn()) {
    // 로그인 상태인 경우에만 상품을 장바구니에 추가
    // ...
  } else {
    // 비로그인 상태인 경우 로그인 페이지로 리다이렉트
    window.location.href = "/login";
  }
}

위의 예제 코드는 로그인 상태를 확인하여 접근 권한을 제어하는 checkLoggedInAccess 함수와 로그인 상태에 따라 장바구니에 상품을 추가하는 addToCart 함수를 보여줍니다.

세션 상태 추적 기능은 웹 애플리케이션을 보다 효율적이고 사용자 친화적으로 개발하는 데에 큰 도움을 줍니다. 쿠키를 활용한 세션 상태 추적 기능을 사용하여 다양한 기능을 개발해보세요. Happy coding!