쇼핑몰의 장바구니에 상품 정보를 담을때?

Question

안녕하세요! 쇼핑몰의 장바구니 관련 기능을 구현하다가 궁금한게 생겨서 질문 드립니다.

비회원 상태에서 상품을 장바구니에 등록하면 상품 정보를 쿠키로 저장하는데 상품에 옵션이 여러개 들어가니까

쿠키 SIZE가 200byte 입니다. 인터넷을 찾아보니 브라우저당 쿠키가 4kbyte까지 된다고 하는데 제가 하는 방식으로

하면 한 사람당 장바구니에 상품을 17~ 18개 밖에 못담을거 같아요.

그래서 다른 쇼핑몰을 찾아보면서 어떤식인지 볼려고 했는데 봐도 못알아봐서 이렇게 질문 올리게 되었습니다.

쿠키에는 객체로 key : value 형식으로 7개의 data가 하나의 객체로 만들고 있는데 다른 좋은 방법이 궁금합니다 ㅠㅠ

인터넷을 찾아보니 localStorage는 5mb까지 저장된다고 하는데 초보 개발자라 써도 되는지 몰라서 하루동안

방법만 찾고 있네요.

제가 생각한 방법으로는 쿠키로 관리, 세션으로 관리랑 비회원용 DB를 만들어 접속한 브라우저 ip 같은걸 체크해서

비회원 유저의 key값을 만들어서 DB에서 조회해오는 방법 3가지 생각중인데

쇼핑몰을 처음 해봐서 뭐가 좋은 방법인지 모르겠고 맞는 방법인지도 모르겠네요...

유튜브로 독학할때 보통 장바구니는 쿠키로 관리한다고 해서 일단 쿠키로 구현은 다했는데

테스트한다고 장바구니에 10개정도 넣으니까 사이즈 초과로 bad request 떠서 하루종일 쿠키 관련 검색만하다가

아무것도 못했습니다. 방법 좀 알려주세요 ㅠㅠ

Answer 1

"인터넷을 찾아보니 localStorage는 5mb까지 저장된다고 하는데 초보 개발자라 써도 되는지 몰라서 하루동안

방법만 찾고 있네요."

잘 찾아보셨네요 localStorage 를 사용해서 담으시면 됩니다.

다만 비슷한걸로 sessionStorage 라는 비슷한게 있는데 두가지의 차이점을 명확히 아시고,

둘 중에 어느것으로 구현할지 고민해보시면 됩니다.

localStorage 는 해당 컴퓨터에 쿠키처럼 굳이 초기화하거나 하는 작업을 하지않으면 계속 저장되어있습니다.

한마디로 진짜로 내 "local" 에 저장해두는 일종에 file 같은 것이죠.

sessionStorage 는 해당 session 에 저장하는것입니다.

서버의 session 과 비슷한 개념이며, 이는 브라우저를 종료하거나 하면 그 순간 세션이 끊어지는것처럼

세션 브라우저에 담아둔 객체도 동시에 사라집니다.

이를 쇼핑몰 장바구니 기능에서 구현할때 그럼 무엇을 선택해야 하느냐...

해당 브라우저를 사용하는게 누구던 상관없이 동일 컴퓨터에 동일 브라우저로 로그인시 장바구니를 동기화하고 유지할것이다

>> 브라우저를 종료해도 남아있는 localStorage 를 사용하여 구현.

해당 브라우저를 종료하면 장바구니도 초기화 할 것이다.

>> sessionStorage 를 사용하여 구현.