웹 개발) 브라우저 저장소 Web Storage

Web Storage

key-value로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴

• 웹 데이터를 클라이언트에 저장할 수 있는 자료구조
• 데이터의 지속성에 따른 구분
• cookie와 달리 저장된 데이터가 클라이언트에만 존재하고 서버로 전송되지 않는다.
• 용량 제한이 없다.
• 만료기간 설정이 따로 없고, 한번 저장한 데이터는 영구적으로 존재한다.

Local Storage

• 지정한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관할 수 있다.
• 도메인마다 별도의 로컬 스토리지가 생성된다.
• 브라우저를 종료해도 데이터가 보관되어 다음 번 접속에도 그 데이터를 사용할 수 있다.
• 도메인만 같으면 전역적으로 공유할 수 있다.

Session Storage

• 데이터의 지속성과 접근 범위에 특수한 제한이 있다.
• 현재 페이지가 브라우징되고 있는 context에서만 데이터가 유지된다.
• 즉, 브라우저를 종료시키면 데이터가 삭제된다.
• 서로 다른 도메인의 session storage는 별개의 영역으로 브라우저 별로 서로 침범할 수 없다.

vs Cookie

• 매번 서버로 전송된다.
• → 네트워크 트래픽이 증가한다.
• 용량 제한이 있다.
• 한 사이트당 최대 쿠기 - 20개 / 최대 크기 - 4KB
• 만료 일자를 지정하여 지정된 날짜에 제거된다.
• 만료 일자를 지정하지 않으면 세션 쿠키가 된다.