(프론트 엔드의 첫걸음) 브라우저 저장소에 대해 알아보자

브라우저의 저장소에는 종류에 대해 알아보자.

 

로컬 스토리지 (Local Storage), 세션 스토리지(Session Storage)

로컬 스토리지 (Local Storage) 는 HTML5 에 추가된 저장소이다. 간단한 키와 값을 저장할 수 있는 곳이며, KEY - VALUE 형태이다.

 

로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다. 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 남아있다. 세션 스토리지의 데이터는 사용자가 윈도우나 브라우저는 닫으면 제거된다.

자동로그인 등 지속적으로 필요한 데이터는 로컬 스토리지에 저장하고, 일회성 로그인 정보 등 잠깐 필요한 데이터는 세션 스토리지에 저장하면 됩니다. 

 

로컬 스토리지

localstorage.getItem();

 

세션 스토리지

sessionStorage.getItem();

 

 

그렇다면 쿠키(Cookie) 란 무엇일까?

쿠키는 브라우저 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 쿠키에 저장된 데이터가 모든 HTTP 요청마다 포함되기 때문에 클라이언트와 서버 사이의 트래픽이 증가하여 서버에 부담을 줄 수 있다. 하나의 쿠키값에 4KB를 저장한다.

 

쿠키

document.cookie

 

 

참고

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048