먹짱(쇼핑몰 프로젝트) - sessionStorage를 활용한 장바구니 구현

ryan·2022년 5월 27일

먹짱 - 쇼핑몰 프로젝트

목록 보기

4/12

개요

내가 담당하는 상품 상세 페이지에서 장바구니 기능을 sessionStorage를 활용하여 구현했다.

보통 쇼핑몰에서는 webStorage를 통해 장바구니 기능을 활용한다고 한다.

로그인을 하지 않은 상태에서도 장바구니를 등록하고 결제까지 이어질 수 있는 편리성을 제공하고,

장바구니는 수시로 바뀌는 데이터인데, 매번 db에 요청하는 것보다 브라우저에 있는 저장소를 활용하는게 더 효율적이기 때문이다.

WEB Storage

WEB Storage는 mdn에서 이렇게 정의한다.

브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key/value 데이터를 안전하게 저장할 수 있는 메커니즘을 제공.

Storage 객체는 단순한 key-value 저장소이며, 객체와 비슷하다. 이 데이터들은 페이지 로딩에도 온전하게 유지된다.

간단하게 생각하면 저용량 db를 사용자의 브라우저에 심어둘 수 있다는 의미이다.
내가 알고 있는 web storage의 종류는 3가지이며 각각 어떤 차이가 있는지 알아보려고 한다.

WEB Storage의 종류

1. local Storage와 session Storage

2가지를 묶은 이유는 mdn에서도 local Storage와 session Storage 동일한 방법으로 동작시킬 수 있다.
- 이 둘은 공유되지 않고 각기 동작한다.
- 저장된 데이터는 페이지 프로토콜(http,https)로 구분한다.
그렇다면 무엇이 다른걸까? Storage 매커니즘의 가장 큰 차이점은 데이터가 유지되는 조건이다.
1. localStorage
- 직접 삭제하지 않는 이상 반영구적으로 저장되며,
- 브라우저를 껐다가 다시 켜도 데이터는 유지된다.
2. sessionStorage
- 새로운 탭이나 창에서 켜면 새로운 각각의 데이터 세션을 생성한다.
- 브라우저를 닫으면 세션은 초기화된다.

IndexedDB

앞서 언급한 local Storage와 session Storage는 저장 가능한 데이터량은 5~10MB이다. 그렇기 때문에 이미지라거나 많은 양의 구조화된 데이터에 적합하지 않아, 이를 위해 제공하는 api가 IndexedDB이다. MDN은 아래와 같이 정의했다.

파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다.

IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다.

IndexedDB는 관계형데이터베이스와 같이 트랜잭션을 사용하여 데이터베이스 스키마, 데이터베이스 통신 등이 이루어진다.
잠깐 실습해본적이 있지만.. 매우 다루기 어려웠고, 일단 지금 내 수준에서는 이 정도만 알고 있어도 충분할 것 같다.

sessionStorage의 활용

이번에 내가 선택한 web Storage는 sessionStorage이다.
sessionStorage의 동작은 다음과 같다
1. 장바구니 버튼을 클릭한 경우 이벤트 리스너 함수가 호출
2. 호출된 함수는 setItem을 통해 key(상품번호)와 value(수량)를 지정한다.
3. getItem을 통해 Storage에 같은 key(상품)를 가진 데이터가 있는 경우, 삭제하고 최신의 데이터를 넣는다.

코드

function moveItemToCart(quantity, id, e) { // 매개변수 (담은 상품의 수량, 상품 고유번호, 이벤트 객체)
  let item = {quantity, id};
  // 같은 상품의 장바구니 데이터가 있는 경우 기존 sessionStorage데이터 삭제 후 다시 넣기
  // sessionStorage 데이터는 json으로 저장되기 때문에, 변환하는 작업이 필요하다. 
  if (!sessionStorage.getItem(`cart.${id}`)) sessionStorage.setItem(`cart.${id}`, JSON.stringify(item));
  else { 
    sessionStorage.removeItem(`cart.${id}`); // 같은 상품이 있을 경우, 해당 장바구니 상품 삭제
    sessionStorage.setItem(`cart.${id}`, JSON.stringify(item)); // 최신의 데이터로 다시 저장
  }
}