로컬스토리지(Local Storage) VS세션 스토리지 (Session Storage) 그리고 쿠키(Cookie)

로컬 스토리지,세션 스토리지? 그리고 쿠키는  프론트 엔드 개발자 라면 많이 들어본 용어이다!

그러면 이들의 차이에 대해서 명.확.히 알아보자.

 

우선적으로 Storage는  HTML5에 추가된 저장소이다. 간단하게 key-value의 맵핑 형태의 스토리지이다.

 

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

로컬 스토리지는 영구성을 띈다. 삭제를 하지 않을 경우, 그.대.로 유지 된다.

세션 스토리지의 데이터는 윈도우나 브라우저의 탭을 닫을 경우 제거된다. 

 

 

상황에 따라서, 지속적인 데이터 유지가 필요할 경우는 로컬 스토리지에 일회성 데이터의 경우 세션 스토리지에 저장하면 된다.

 

그렇다면 쿠키(Cookie) 는 ? 

 

바로 HTML5이전에 도입된 브라우저 저장소이다. 차이점은 용량과 데이터 만료일이다.

또한, 저장된 데이터가 모든 HTTP 요청 함께 전송되기 때문에 서버사이에 트레픽이 증가한다.

 

그렇다면 왜 쿠키를 쓰지 않고 로컬스토리지 와 세션 스토리지가 등장 했을까?

 

 

쿠키는

웹사이트에서 사용자를 인식하기 위한 목적으로 사용된다 .서버는 쿠키에 사용자에 대한 Session ID를 부여하고

유효 기한 동안, 브라우저는 쿠키를  보내 사용자를 인식하도록 한다. 이렇게 쿠키는 비상태인  HTTP 위에서 사용자 세션 계층을 생성하는데 사용 된다. 이 때문에 매 요청 마다 서버에 함께 전송되고 이러한 과정은 불 필요한 데이터 낭비 와 서버 부하를 일으킬 것이다.

 

따라서, 매번 서버에 보내지 않아도 될 데이터를 따로 관리하기 위해  로컬스토리지 와 세션 스토리지가 등장한 것이다.

 

 

[쿠키,로컬스토리지,세션 스토리지의 차이점] 출처:https://juneyr.dev/2018-12-26/web-storage

참고 :제로초 블로그