브라우저 저장소에 대해 설명해보세요.

👉 로컬 스토리지, 세션 스토리지, 쿠키

로컬 스토리지와 세션 스토리지는 HTML5에 추가된 저장소로 key - value 형태로 구성되어 있고, 차이점은 영구성에 있다.

 

로컬 스토리지는 사용자가 지우지 않는 한 데이터가 브라우저에 영구적으로 남아 있지만,

세션 스토리지는 세션을 종료하면 데이터가 삭제된다.

 

로컬 스토리지, 세션 스토리지 이전에 저장소 역할을 했던 것이 쿠키이다.

쿠키는 만료기한이 존재하는 key - value형태이다.

 

👉 로컬 스토리지 & 세션 스토리지

값으로는 문자열, 숫자, 불린 등을 저장할 수 있지만 모두 문자열로 저장된다.

사용법은 둘다 아래와 같다. localStorage를 sessionStorage로 변경하면 된다.

localStorage.setItem(키, 값) // 저장
localStorage.getItem(키) // 조회
localStorage.removeItem(키) // 해당 키가 삭제
localStorage.clear() // 전체삭제

장점 : 

- 서버에 불필요한 데이터를 저장하지 않는다.

- 용량이 크다 ( 5mb )

 

단점 :

- HTML5를 지원하지 않는 경우 사용이 불가능 하다.

 

👉 쿠키

앞선 웹스토리지는 브라우저만 저장하지만 쿠키는 브라우저, 서버 모두 저장한다.

setCooke(key, value, time)
getCookie(key)

장점 : 

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

 

단점 : 

- HTTP 요청마다 포함되어 api 호출로 서버에 부담이 된다.

- 용량이 작다 ( 4kb )

 

👉 사용 예

• 자동 로그인 - 로컬 스토리지
• 입력 내용 - 세션 스토리지
• 비로그인 장바구니 - 세션 스토리지
• 다시 보지 않음 팝업창 - 쿠키