이제야 보이는 웹 스토리지 개념들

쿠키 vs 웹 스토리지

둘의 가장 큰 차이는 서버와 데이터를 공유하는가에 대한 여부다. 

쿠키는 서버와 데이터를 공유하고, 웹스토리지 데이터는 클라이언트/프론트단에서 해결한다. 

쿠키데이터든 웹스토리지에 있는 데이터는 도메인 별로 각각 생긴다. 

즉, naver.com에 대한 쿠키, 웹스토리지데이터가 있고 daum.net에 대한 쿠키, 웹스토리지 데이터가 따로 메모리에 생성된다. 

 

쿠키

- 쿠키데이터는 웹 브라우저()에 저장되며, Request Header를 통해 서버에 전달된다. F12(개발자모드)에서 보면 애플리케이션>저장용량>쿠키 에 값이 저장되어있다. 

- 만료일자가 따로 없다. 즉, 사용자가 직접 설정하거나 세션 종료시 함께 삭제된다. 이것을 '비휘발성' 특성을 지녔다고 표현한다. 

- 쿠키 데이터는 도메인별로 생기긴하나 다른 도메인들끼리 쿠키 공유가 가능하다. 하지만 이 경우 with credential/CORS처리 등으로 처리해줘야한다. 

- 쿠키데이터는 통으로 움직인다. 즉, 쿠키에 저장된 A,B,C 데이터 중 A 데이터만 따로 보낼 수가 없다. 따라서 갯수와 용량에 대한 제한이 생긴다. 갯수는 최대 20개까지, 용량은 4KB로 제한된다. 이 때 갯수와 용량을 초과할 경우 갯수에 대해서는 LRU정책이, 용량에 대해서는 4kb초과시 저장이 되지 않는다. (사용자가 직접 처리해줘야하는 것 같다)

 

 

웹스토리지

- 웹스토리지는 로컬스토리지와 세션스토리지로 나뉜다. 둘 다 서버와 데이터를 주고받지 않는다는게 쿠키와의 차이점이다. 물론 프론트에서 정보를 저장해서 백으로 넘겨주는 방식으로 통신은 가능하다. 

- {key : value} 형태로 저장된다. 

 

a) 로컬스토리지

- 도메인마다 할당된다. 

- 영구저장된다. (얘 또한 비휘발성. 브라우저를 껐다가 켜도 해당 데이터는 디스크에 저장되어있다)

- 팝업에 대한 정보들이 여기에 저장된다 (일주일 동안 보지않기, 평생보지 않기 등등 + 굳이 DB까지 저장되어야할 정보가 아니라서 웹에서 처리한다. )

- 브라우저 전역에 저장된다. 즉, 도메인에 있는 탭끼리 서로 정보가 공유된다. 

b) 세션스토리지 

- 브라우저 탭에 한정된다. 웹/탭을 끄면 데이터도 날아간다. 

 

 

시간관계상 나누지 못한 이야기

- 캐시데이터, 브라우징 히스토리 

- 앱에서는 이런 브라우저단 데이터를 어떻게 핸들링하는가?