최근 본 상품 구현하기 : url에서 product_id가져와서 쿠키에 저장하기

 

 최근 상품을 저장하는데는 크게 두 가지 방법이 있다. 서버에 저장하는 방법과 클라이언트, 즉 크롬 등 사용자 환경에 저장하는 방법이다.

 서버에 저장하는 방법은 두 가지 의미에서 그 한계가 명확하다.  첫째, 사용자가 페이지를 클릭하는 것을 분석할 만한 마케팅적 가치가 떨어진다. 물론 넓게 보면 사용자가 흥미 있는 상품을 클릭한다는 점에서 의미가 있겠지만 '관심 상품 목록'이라는 더 명확한 마케팅적 가치가 있는 기능보다는 그 효용이 떨어진다. 둘째, 쇼핑몰의 모든 회원이 들어간 모든 페이지의 상품을 서버에 저장하기에는 그 용량이 너무 커서 서버비용이 기하급수적으로 늘어난다.

 종합적으로 말하자면 마케팅적 효용이 현저히 적은 '최근 상품 저장하기'를 그 많은 서버비용을 들여가면서 서버에 저장할 필요가 없다는 것이다.  따라서  '쿠키'를 이용하여 최근 본 상품을 구현하도록 한다.

 

 

 

1. 쿠키의 작동원리 🍪

쿠키를 등록하는 메커니즘은 크게 두 가지 단계로 이루어진다. 첫 번째 단계는 쿠키를 생성하고 설정하는 것이고, 두 번째 단계는 쿠키를 브라우저에 저장하는 것이다. 

1. 쿠키 생성 및 설정:

• JavaScript를 사용하여 `document.cookie` 속성을 이용하여 쿠키 값을 설정한다. `document.cookie`은 현재 페이지의 쿠키에 접근하고 수정하는 데 사용되는 속성이다.
•  쿠키의 이름, 값, 만료 날짜, 경로, 도메인 및 보안 설정 등을 설정한다.
• 이 정보는  `name=value; expires=date; path=path; domain=domain; secure`와 같은 형식으로 설정된다.

2. 쿠키 저장:

• 쿠키가 생성되고 설정되면, 브라우저는 해당 쿠키를 저장한다. 저장된 쿠키는 브라우저가 종료되어도 유지되며, 설정된 만료 날짜 이후에는 삭제된다.
•  쿠키는 브라우저의 "쿠키 저장소"에 저장된다. 크롬에서는 이 저장소를 관리하는 "쿠키 관리자"를 제공하여 사용자가 쿠키를 확인하고 삭제할 수 있도록 한다. 쿠키 관리자는 주소 창의 "설정" 메뉴에서 "쿠키 및 기타 사이트 데이터" 옵션을 선택하여 접근할 수 있다.
• 또한 개발자 도구의 Application에서 다음과 같이 확인할 수 있다.

 

 

 

 

2. 쿠키 등록 코드🍪

• 상품 목록 페이지에서 상세페이지로 이동할 때 쿼리스트링으로 product_Id값이 들어오도록 구현되어있다.
• (http://localhost:8080/stroke/product/productDetail?product_id=72)
• 상품 상세페이지에서는 url의  product_Id 값을 받아와 쿠키에 누적 저장한다.
• 이 때 product_Id를 중복되지 않으며 24시간 동안 저장되고 자동으로 삭제된다. 작동순서는 아래와 같다.

 

• 1) 페이지가 로드되면 onPageLoad()함수가 실행된다 window.addEventListener('load', onPageLoad);
• onPageLoad()에서는 쿠키 등록에 필요한 쿠키의 key값, value 값, 만료일을 쿠키 등록 함수setCookie(cookieName, value, expirationDate)에 전달한다.

//Cookies----------------------------------------------------

// 페이지 로드 후 실행할 함수

function onPageLoad() {

  var url = window.location.href;

  var productId = getProductIDFromURL(url);

  console.log("productId::" + productId);

  if (productId) {

    var recentProducts = getCookie('recent_products');

    var recentProductIds = recentProducts ? recentProducts.split('/') : [];

   

    if (!recentProductIds.includes(productId)) {

      recentProductIds.push(productId);

    }

    // 최대 10개까지 유지

    if (recentProductIds.length > 10) {

      recentProductIds.shift();

    }

    recentProducts = recentProductIds.join('/');

    // 24시간 후의 시간 객체 생성

    var expirationDate = new Date();

    expirationDate.setTime(expirationDate.getTime() + (24 * 60 * 60 * 1000));

    console.log("expirationDate::" + expirationDate);

    // 쿠키에 recent_products 저장 (유효기간: 24시간)

    setCookie('recent_products', recentProducts, expirationDate);

  }

}

// 페이지 로드 이벤트 리스너 등록

window.addEventListener('load', onPageLoad);

function setCookie(cookieName, value, expirationDate) {

  var cookieValue = escape(value) + ((expirationDate == null) ? '' : '; expires=' + expirationDate.toUTCString());

  document.cookie = cookieName + '=' + cookieValue;

}

function getCookie(cookieName) {

  var name = cookieName + '=';

  var decodedCookie = decodeURIComponent(document.cookie);

  var cookieArray = decodedCookie.split(';');

  for (var i = 0; i < cookieArray.length; i++) {

    var cookie = cookieArray[i];

    while (cookie.charAt(0) == ' ') {

      cookie = cookie.substring(1);

    }

    if (cookie.indexOf(name) == 0) {

      return cookie.substring(name.length, cookie.length);

    }

  }

  return '';

}

//url에서 productId를 가져오는 함수

function getProductIDFromURL(url) {

  var regex = /[?&]product_id=(\d+)/;

  var match = regex.exec(url);

  if (match && match[1]) {

    return match[1];

  }

  return null;

}

//Cookies End----------------------------------------------------