브라우저 저장소에 대해

Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능.

 

키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

 

쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한. ex) A domain -> B domain 데이터 사용 불가.

 

• 쿠키의 단점
  • 4KB의 데이터 저장 제한
  • HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
  • 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

---

웹스토리지와 쿠키의 비교

쿠키는 매번 서버로 전송된다.

웹스토리지는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지는 않는다.

이는 네트워크 트래픽 비용을 줄여준다.

 

웹스토리지는 단순 문자열을 넘어(스크립트) 객체 정보를 저장할 수 있다.

문자열 기반 데이터 외에 체계적으로 구조화된 객체를 저장할 수 있다.

 

웹스토리지는 용량의 제한이 없다.

쿠키는 클라이언트에 최대 300개의 쿠키를 저장할 수 있으며, 하나의 도메인에서는 최대 20개, 개당 최대 4KB.

웹 스토리지는 제한이 없다. 쿠키도 하위키를 이용하면 제한을 일부 해소할 수는 있으나, 대용량으로 저장할 일은 없다.

 

웹스토리지는 영구 데이터 저장이 가능하다.

쿠키는 만료일자를 지정하게 되어있어 언젠가 제거된다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 영구 쿠키를 원한다면 만료일자를 아주 길게 설정하여 해결 할 수 있다.

웹스토리지는 만료 기간 설정이 없다.

 

세션 쿠키(Session Cookie) : 활성 웹 브라우저 세션이 있는 동안 저장된다. 일반적으로 웹 브라우저를 닫을 때 삭제된다.

---

웹스토리지의 종류

1. LocalStorage : 브라우저를 닫았다가 다시 열어도 계속 유지
2. SessionStorage : 브라우저가 열려있는 한 페이지를 Reload해도 계속 유지, 브라우저 닫으면 삭제

기존에 사용하던 쿠키(cookie)와 세션(session)처럼 Web Storage도 LocalStorage와 SessionStorage를 제공한다. SessionStorage는 기존 세션처럼 서버에 저장된다고 생각할 수 있지만, 로컬 브라우저에 저장된다. 다만 생명 주기가 LocalStorage와 SessionStorage가 서로 다르다고 생각하면 된다.

 

세션(session)

쿠키는 방문자의 정보를 방문자의 컴퓨터 메모리에 저장.

세션은 방문자 요청에 따른 정보를 방문자 메모리가 아니라, 웹 서버가 세션 아이디를 만들어

서비스가 돌아가고있는 서버에 저장

 

사용자에 대한 정보를 서버에 두어 보안은 쿠키보다 좋으나, 사용자가 많으면 서버 메모리를 많이 차지 > 과부하

 

쿠키는 브라우저를 종료하더라도 저장되어있을 수 있지만, 세션은 서버에서 만료시간/날짜를 정해서 지워버릴 수 있으며, 브라우저 종료 시 저장된 데이터가 사라짐.

 

LocalStorage

• 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
• 도메인마다 별도로 LocalStorage가 생성된다.
  : 도메인만 같으면 전역적으로 공유가 가능하다.
• Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

SessionStorage

• 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
  : Web Storage의 기본 보안처럼 도메인별로 별도로 생성된다. 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. ✔️브라우저 컨텍스트가 다르기 때문이다.
• ✔️ 브라우저 컨텍스트
  Document를 표시하는 환경을 말한다.
  즉, 브라우저가 불러온 웹페이지라고 생각하면 된다.
• Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.