local Storage, Session Storage, 쿠키

Frontend/etc

개발하는루루 2023. 3. 14. 22:27

서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

Key-Value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 데이터를 조회할 수 있다.

Web Storage에는 영구저장소인 Local Storage와 임시저장소인 Session Storage가 있다.

Web Storage는 기존 웹 환경의 Cookie와 개념이 매우 유사하다.

클라이언트에 데이터를 저장한다는 관점에서 쿠키와 매우 비슷하다.

또한 사이트의 도메인 단위로 접근이 제한된다는 점도 공통적이다. 즉, A 도메인에서 클라이언트에 저장한 데이터는 B 도메인에서도 조회할 수 없다.

차이점은 아래와 같다.

- 쿠키 정보는 서버로 전송될 때마다 함께 전송된다.

- 또한 쿠키는 용량과 저장할 수 있는 개수 제한이 있지만 Web Storage에는 그러한 제한이 없다.

- 쿠키는 만료일자가 있어 유효기간이 있지만 Web Storage는 영구적으로 데이터를 저장할 수 있다.

위에서 Web Storage는 데이터의 지속성에 따라 Local Storage와 Session Storage로 구분된다.

windows 전역 객체의 LocalStorage라는 컬렉션을 통해 데이터의 저장과 조회가 이루어지며, 명시적으로 지우지 않는 이상 영구보관이 가능하다.

나의 경우, 자동로그인 기능을 구현할 때, 로그인과 관련한 SessionId를 Local Storage에 저장시켰다.

windows 전역 객체의 SessionStorage라는 컬렉션을 통해 데이터의 저장과 조회가 이루어지며, 데이터가 지속적으로 보관되지 않는다. 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

이를테면 로그인을 시도하고 사용중이던 탭을 끄면, 다시 탭을 켜도 로그아웃 되어있을 때 로그인과 관련한 정보는 Session Storage에 저장된 것이다.

Web Storage든 Cookie든 서로 다른 도메인에서 데이터에 접근하려고 하는 시도는 막을 수 있지만, 클라이언트 즉 사용자를 막고 있진 않으므로 클라이언트는 얼마든지 저장된 값을 임의로 수정이 가능하다.