Intro
브라우저 저장소(Web Storage)란 웹 브라우저에서 데이터를 저장하는 데 사용되는 매커니즘이다.
이를 통해 웹 어플리케이션은 클라이언트 측에서 데이터를 저장하고, 검색할 수 있게 되어 사용자 경험을 개선하는 역할을 한다.
기존에는 쿠키(Cookie)를 통해 데이터를 저장했지만,
HTML5부터는 쿠키의 단점을 보완하는 Web Storage를 제공한다.
(Cookie 사용을 중단한 것은 아니다.)
쿠키 (Cookie)
쿠키는 어떤 유저가 웹 사이트에 방문했을 때, 남겨지는 정보의 작은 조각으로, 특징은 아래와 같다.
쿠키의 특징
-
이름/값의 쌍으로 구성
- 0개 이상의 속성은 쿠키의 만료 기간, 도메인 등의 정보를 저장한다.
-
쿠키는 서버로 전송됨
- 쿠키의 생성 과정:
클라이언트의 정보 요청 -> 서버의 쿠키 생성 -> 생성 쿠키 + 요청 정보 회신 -> 클라이언트는 로컬에 쿠키를 저장
재방문 시, 쿠키가 이미 있다면 서버에 쿠키를 전달하여 클라이언트를 식별한다. -
용량의 제한이 존재
- 클라이언트는 최대 300개까지의 쿠키를 가질 수 있다.
- 하나의 도메인 당 최대 20개
- 하나의 쿠키 당 최대 4KB
-
만료 일자가 있음
-
사용 예시
- 하루동안 보지 않기, 장바구니, 검색기록 등
단, 쿠키는 보안에 취약하다는 단점이 있다.
쿠키는 사용자의 컴퓨터 그리고 브라우저에 저장되기 때문에 타인과 공유할 경우 혹은 브라우저가 피해를 입은 경우 쿠키에 저장된 정보가 읽혀질 수 있다.
또한, 쿠키는 암호화되어 있지 않다. 따라서 중요한 개인 정보를 저장할 때 유의가 필요하다. 웹사이트에 로그인할 때 사용하는 세션ID 역시 포함될 수 있는데, 이 정보가 탈취된다면 사용자의 계정에 대한 완벽한 엑세스 권한이 부여될 수 있다.
이러한 단점을 보완하기 위해 HTML5부터는 두 가지의 브라우저 저장소를 추가로 제공하고 있다.
브라우저 저장소(Web Storage)
웹 스토리지는 다시 로컬 스토리지와, 세션 스토리지로 나뉜다.
공통적인 특징
-
대용량 데이터 저장
- 브라우저마다 최소 5MB 이상의 데이터를 저장할 수 있다. -
동일 출처 정책
- 다른 도메인의 어플리케이션이나 스크립트에서 접근할 수 없다. -
클라이언트 측 저장
- 서버와의 통신 없이 데이터를 불러올 수 있다.
로컬 스토리지(Local Storage)의 특징
-
영구적 저장
- 브라우저를 종료하고 다시 열어도 유지된다. -
데이터 형식 제한
- 문자열 형식으로만 데이터를 저장할 수 있다. 따라서 객체나 배열 같은 복잡한 데이터는 JSON.stringfy()와 JSON.parse()를 이용해 문자열로 변환해야 한다.
세션 스토리지(Session Storage)의 특징
-
임시 저장
- 저장된 데이터는 브라우저를 닫으면 삭제된다. 이를 통해 사용자의 프라이버시를 보호할 수 있다. -
로그아웃 시 데이터 삭제
- 브라우저를 닫는 것뿐 아니라 로그아웃할 때도 저장된 데이터는 자동으로 삭제 된다.
그럼 어디에 뭘 쓸까?
쿠키: 일시적으로 필요한, 중요성이 낮은 데이터의 저장
예) 팝업: 오늘 하루 안 보기, 장바구니 정보, 사용자 로그인 정보(HTTPS와 같은 보안 프로토콜과 함께) 등
로컬 스토리지: 유지되어야 할 데이터, 대용량 데이터
예) 사용자 프로필 정보, 테마 설정, 사용자가 저장한 문서 등
세션 스토리지: 보안 상 중요한 데이터, 대용량 데이터
예) 사용자의 일시적 작업 데이터, 사용자가 작성한 글 등
