장바구니 담기

장바구니 담기 기능을 구현중에 문득 드는 생각이,

담기를 누르면 모달창이 꺼지고 계속해서 쇼핑을 이어나간 후에 장바구니 페이지에 들어가면 그때 내가 선택한 상품 목록들이 나오는데, 굳이 장바구니담기를 누를때 DB에 저장을 해야하나? 라는 생각이 들었다.
그래서 들었던 생각은

• 리덕스에만 저장을 한다음 페이지에서 꺼내다 쓰면되지 않을까?
  하지만 리덕스는 새로고침하면 초기화되기 때문에 안되겠다!
  그래서 다른 방법을 찾던중에 redux-persist라는 라이브러리를 발견했다!!
  redux-persist란 똑같이 리덕스에 저장을 하게 되면 자동적으로 localStorage나
  sessionStorage에 저장을 해주는 간편한 라이브러리이다.

그래서 persist를 공부하는 와중에 또 들었던 생각은 아직 local, session Storage로 제대로 사용을 못해봤는데 persist를 쓰는게 맞을까라는 생각을 했고, 결국에는 다음에 persist를 사용해 보기로 하고 일단, storage에 직접 저장을 해보는 방식으로 구현하기로 결정했다.

스토리지에 여러개의 키값을 넣을떄는 객체형식으로 넣어준다!

localStorage.setItem('person', { name: 'junwoo'});
localStorage.getItem('person');	//[object Object]

localStorage.setItem('person', JSON.stringify({name: 'junwoo'}));
JSON.parse(localStorage.getItem('person'));	//{name: 'junwoo'}

로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장!

• ex) 자동 로그인 저장

세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제!

• ex) 입력 폼 정보 저장
  3-1) 로컬&세션스토리지 장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.
  3-2) 로컬&세션스토리지 장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)
  3-3) 로컬&세션스토리지 단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가

쿠키는 만료 기한이 있는 Key, Value 형태의 저장소

• 4-1) 쿠키 장점 : 대부분의 브라우저가 지원
  4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.
  4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)
  4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험