본문 바로가기

프로그래밍/frontend.

웹 브라우저의 저장소 session, local storage,cookie

웹 브라우저(클라이언트)에는 로컬 스토리지, 쿠키, 세선스토리지와 같은 다양한 저장소가 있습니다.

 

web storage

web storage란 해당 웹 사이트와 관련된 특정 데이터를 클라이언트의 웹 브라우저에 저장할 수 있도록 하는 기능.

기본적으로 key-value의 형태로 값을 저장하고 키를 기반으로 저장한 데이터를 조회 할 수 있습니다. 

web storage에는 두가지 형태의 저장소가 있습니다.

 

  session storage(임시 저장소) 브라우저가 열려 있는 동안 데이터가 저장되는 저장소

  local storage(영구 저장소) 브라우저가 닫혀도 저장이 유지되는 저장소

 

session storage에는 유저의 로그인 정보를, local storage에는 로그인 없이 사용 가능한 장바구니, 관심 아이템 등을 저장했던 경험이 있음.

 

* web storage는 도메인(사이트) 별로 접근이 제한된다. a사이트에서 저장한 내용을 b 사이트에서 접근할 수 없다.

* cookie의 단점을 극복하고자 개발됨.

 

cookie?

동일하게 key-value 형태로 값을 저장

* web storage는 object를 저장할 수 있는 반면 cookie는 문자열만 저장 가능

* 한 쌍의 데이터의 용량은 4kb를 초과할 수 없음 ** web storage는 제한이 없음

* cookie 의 저장된 값들은 http 요청에 매번 포함되기 때문에 (매번 서버로 전송되기 때문에) 성능 저하를 유발한다.

 

 

 

참고.

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

 

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie