브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )

이론편 : 브라우저 저장소 ( Theory of Browser Storage )

브라우저 저장소 분류

• 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소.
• 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소

 

웹 스토리지 ( Web Storage)

웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소 이며, 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있습니다. 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다. 먼저, 로컬 스토리지 ( Local Storage ) 는 브라우저를 종료해도 데이터를 보관(영구성)합니다. 또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있습니다. 하지만, 세션 스토리지 ( Session Storage ) 는 브라우저가 종료되면 데이터가 삭제(비영구성)됩니다. 도메인이 같더라도 브라우저가 다르면 ( 탭 브라우저, 다른 브라우저 ) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않습니다.

표로 비교해 보겠습니다.

	로컬 스토리지	세션 스토리지
데이터 유지	브라우저 종료시 보관	브라우저 종료시 삭제
데이터 범위	동일한 도메인 전역 공유	브라우저간 공유 안됨

저장공간의 limit는 브라우저 및 기기에 따라 상이하기 때문에 필요할 때 찾아보는 것이 조금 더 효과적입니다. 사실 브라우저가 한 두개도 아니고 저장공간까지 일일이 다 머릿속에 집어넣을 필요 없습니다.

쿠키 ( Cookie )

쿠키는 애초에 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어 졌습니다. 예를 들어 우리가 HTTP 요청을 보낼때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없습니다. 이 때 우리는 쿠키에 정보를 담아서 서버에 보내면 서버는 쿠키를 읽어서 요청자를 파악합니다. 쿠키는 4KB의 용량 제한을 가지고 있으며 한 사이트당 20개의 쿠키를 가질 수 있습니다. 또한 쿠키는 만료기한을 지정할 수 있습니다. 쿠키는 서버와의 통신을 목적으로 만들어 졌기 때문에 더 주의해야 됩니다. 쿠키에 쓸데없는 값이 많다면 그만큼 네트워크 트래픽이 증가하게 됩니다.

쿠키의 목적

1. 세션 관리 : 서버가 알아야될 정보 ( 로그인 및 사용자 정보 , 접속시간 )
2. 개인화 : 사용자에 맞는 페이지 제공
3. 트래킹 : 사용자 행동 및 패턴 분석

 

웹 스토리지와 쿠키의 차이

웹스토리지는 쿠키와 달리 서버에 전송되지 않고 명시적으로만 전송 가능하기 때문에 서버에 부담이 가지 않습니다. 또한, 필요한 경우에만 꺼내 쓰는 것임으로 자동 전송의 위험성이 없으며, 다른 오리진이 요청할 때에는 꺼내쓰고 싶어도 오리진 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸수 없습니다.(CSRF) 웹스토리지는 쿠키에 비해 용량이 넉넉합니다.

실습편 : 브라우저 저장소 ( Training of Browser Storage )

로컬 스토리지 / 세션 스토리지 ( LocalStorage / SessionStorage )

로컬 스토리지 ( Local Storage ) 는 window.localStorage 그리고 세션 스토리지 ( Session storage ) 는 window.sessionStorage 에 위치하며 key-value값으로 조회가 가느합니다. 데이터는 문자열로 변환되어 저장되기 때문에 이를 신경써주시면 좋겠습니다. 예를 들어, Object로 넣으면 key : "{key:value}" 로 들어가는것이 아니라 key : "[object object]"로 들어가 값을 알 수 없게 됩니다.

저장

//로컬 
function setLocalStorage(key, value){ localStorage.setItem(key,JSON.stringify(value)); } 
//세션 
function setSessionStorage(key, value){ sessionStorage.setItem(key,JSON.stringify(value)); }

조회

/** KEY로 VALUE 조회 */ 
//로컬 
function getLocalStorage(key){ return JSON.parse(localStorage.getItem(key)); }
//세션 
function getSessionStorage(key){ return JSON.parse(sessionStorage.getItem(key)); } 
/** INDEX로 KEY 조회 */ 
//로컬 
function getLocalStroageKey(index){ return localStorage.key(index) } 
//세션 
function getSessionStorageKey(index){ return sessionStorage.key(index) }

삭제

/** KEY 로 삭제 */ 
//로컬 
function removeLocalStorage(key){ localStorage.removeItem(key); } 
//세션 
function removeSessionStorage(key){ sessionStorage.removeItem(key); } 
/** 전체 삭제 */ 
//로컬 
function clearLocalStorage(){ localStorage.clear(); } 
//세션
function clearSessionStorage(){ sessionStorage.clear(); }

쿠키 ( Cookie )

클라이언트 환경에서 쿠키를 넣는 간단한 방법은 아래 예시를 참고하면 된다.

저장

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=/"; 
}

이렇게 브라우저 저장소에 대한 설명을 마치겠습니다. 브라우저 저장소는 프론트엔드 면접 단골 질문이기 때문에 꼭 이해를 하고 가셔야 됩니다. 프론트엔드 개발자라면 꼭 이해를 하고있어야 된다고 생각합니다.