Browser Storage
는 크게 다음과 같은 2가지 저장소가 존재한다.
웹 스토리지(Web Storage)
: 웹 데이터를 클라이언트에 저장하기 위해 만들어진 Key-Value
형식의 저장소
쿠키(Cookie)
: 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 Key-Value
형식의 저장소
클라이언트에 데이터를 저장할 수 있도록 지원하는
HTML5
의 새로운 기능
Web Storage
는 HTML5
에 추가된 클라이언트 기반 Key-Value
형태의 저장소 이며, Local Storage
와 Session Storage
로 분류할 수 있다.
두 저장소의 차이점은 영구성과 범위에 있으며, 이를 표로 확인해보면 다음과 같다.
Local | Session | |
---|---|---|
데이터 유지 | 브라우저 종료시 보관 | 브라우저 종료시 삭제 |
데이터 범위 | 동일한 도메인 전역 공유 | 브라우저간 공유 불가능 |
먼저, Local Storage
는 브라우저를 종료해도 데이터를 영구적으로 보관한다.
또한, 도메인이 동일하다면 전역으로 데이터를 공유할 수 있는 특성이 있다.
반대로 Session Storage
는 브라우저가 종료되면 데이터가 삭제되며, 같은 도메인이여도 브라우저가 다르다면 브라우저별로 각각의 Session Storage가 형성되어 데이터 공유가 불가능하다.
웹 사이트에 접속할 때 생성되는 정보를 담은 임시 파일
Cookie
는 Web Storage
와 달리 서버와 클라이언트의 지속적인 데이터 교환을 위해 만들어졌다.
예를 들면 사용자가 서버로의 HTTP
요청을 보내면, 서버는 요청 자체만으로는 이 요청의 발신자를 확인할 수 없다.
그래서 쿠키에 요청 정보를 담아 서버에 보내게되면 서버는 쿠키를 읽어 발신자를 파악할 수 있다.
쿠키의 용량 제한은 4KB
이며, 한 사이트당 20개의 쿠키를 소유할 수 있다.
하지만 쿠키에 필요없는 값이 많이 포함되어 있다면 그만큼 네트워크 트래픽이 증가되므로 주의해야 한다.
쿠키의 대표적인 용도는 다음과 같다.
- 세션 관리 : 서버가 확인해야될 정보 (로그인 및 사용자 정보, 접속시간...등등)
- 개인화 : 사용자에 맞는 페이지 제공
- 트래킹 : 사용자 행동 및 패턴 분석
Web Storage
는 Cookie
와 달리 서버에 전송되지 않고 명시적으로만 전송 가능하기 때문에 서버에 부담이 가지 않는다.
또한, 필요한 경우에 선택적으로 사용할 수 있어 자동 전송의 위험성이 없으며, 다른 Origin
이 요청할 때에는 Origin
단위로 접근이 제한되는 특성 때문에 사용할 수 없다.
Local Storage
는 window.localStorage
, Session storage
는 window.sessionStorage
에 위치하며 key-value
값으로 조회가 가능하다.
또한 저장된 데이터는 문자열로 저장되기 때문에 Object
데이터를 저장하면 key: {key: value}
형태가 아닌, key: [object object]
형태로 저장된다.
Web Storage
는 setItem(Key, Value)
로 데이터를 저장한다.
// Local Storage
function setLocalStorage(key, value){ localStorage.setItem(key,JSON.stringify(value)); }
// Session Storage
function setSessionStorage(key, value){ sessionStorage.setItem(key,JSON.stringify(value)); }
Web Storage
는 getItem(Key)
또는 key(Index)
로 데이터를 조회한다.
// Key 조회
function getLocalStorage(key){ return JSON.parse(localStorage.getItem(key)); }
function getSessionStorage(key){ return JSON.parse(sessionStorage.getItem(key)); }
// Index 조회
function getLocalStroageKey(index){ return localStorage.key(index) }
function getSessionStorageKey(index){ return sessionStorage.key(index) }
Web Storage
는 removeItem(Key)
또는 clear
로 데이터를 삭제한다.
// Key 삭제
function removeLocalStorage(key){ localStorage.removeItem(key); }
function removeSessionStorage(key){ sessionStorage.removeItem(key); }
// 전체 삭제
function clearLocalStorage(){ localStorage.clear(); }
function clearSessionStorage(){ sessionStorage.clear(); }
클라이언트 환경에서 쿠키를 사용하는 방법은 다음과 같다.
function setCookie(key, value, day=1) {
let date = new Date();
date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000);
document.cookie = key + "=" + JSON.stringify(value) + ";expires=" + date.toUTCString() + ";path=/";
}
function getCookie(key) {
let value = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)");
return value ? JSON.parse(value[2]) : null;
}
function removeCookie(key) {
let date = new Date();
document.cookie = key + "= " + "; expires=" + date.toUTCString() + "; path=/";
}
Browser Storage (essentials for job interview : cookie, web storage, session storage, local storage)