TIL 23.02.25.

localstorage로 장바구니 기능 구현하기

쇼핑몰 장바구니 기능을 구현할 때 localstorage에 저장해두었다가 불러오도록 개발했었다.

그때 필요했던 문법이 JSON.stringify() 그리고 JSON.parse 두 가지였다.
니꼬형의 크롬앱 만들기 수업을 들었다면 알겠지만, 먼저 localstorage에는 객체가 저장되지 않는다. 그래서 이름에서도 알 수 있듯 stringify 문자로 만들어줘야했다. 그리고 다시 불러올때는 parse라는 문법으로 다시 객체로 만들어 주면된다.

아래는 쇼핑몰 프로젝트에서 사용한 예시다. 상품을 보는 페이지에서 장바구니에 담는 버튼을 클릭했을때, setItem을 이용해 프로덕트라는 이름으로 로컬스토리지에 저장한다. 그리고 장바구니 페이지에서 getItem메소드로 저장했던 것들을 불러온다.

localStorage.setItem("products", JSON.stringify(products));

let cart = JSON.parse(localStorage.getItem("products"));