[TIL] 로컬스토리지, 세션스토리지, 쿠키

강인웅·2022년 1월 25일
0
post-custom-banner

쿠키의 단점을 보완해 HTML5에서 웹스토리지라는 기술이 탄생했다

웹스토리지 특징

  • 웹스토리지는 로컬스토리지와 세션 스토리지로 나뉜다.
  • 웹스토리지는 key와 value 형태로 이루어진다.
  • 웹스토리지는 클라이언트에 대한 정보를 저장한다.
  • 웹스토리지는 로컬에만 정보를 저장하고 쿠키는 서버와 로컬에 정보를 저장한다.

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

ex) 자동 로그인


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


로컬 세션스토리지 장,단점

장점

  1. 서버에 불필요하게 데이터를 저장하지 않는다.
  2. 저장할 수 있는 용량이 크다(약 5Mb, 브라우저마다 차이는 존재한다)

단점

  1. HTML5를 지원하지 않는 브라우저의 경우 사용이 불가하다.

쿠키는 만료기한이 있는 key, value 형태의 저장소이다.


쿠키의 장,단점

장점

  1. 대부분의 브라우저가 지원한다.

단점

  1. 매 HTTP 요청마다 포함되어 api호출로 서버에 부담이 된다.
  2. 저장할 수 있는 용량이 작다. (약 4Kb)
  3. 암호화가 존재하지 않아 사용자 정보가 도난당할 위험이 존재한다.

유형별 저장방법

  • 자동 로그인 => 로컬 스토리지
  • 입력 폼 정보 => 세션 스토리지
  • 비로그인 장바구니 => 세션 스토리지
  • 팝업 창 => 쿠키
profile
Developer
post-custom-banner

0개의 댓글