(Web) Browser Storage

Mirrer·2023년 2월 13일
0

WEB

목록 보기
1/2
post-thumbnail

Browser Storage는 크게 다음과 같은 2가지 저장소가 존재한다.

  • 웹 스토리지(Web Storage): 웹 데이터를 클라이언트에 저장하기 위해 만들어진 Key-Value 형식의 저장소

  • 쿠키(Cookie): 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 Key-Value 형식의 저장소


Web Storage

클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능

Web StorageHTML5에 추가된 클라이언트 기반 Key-Value 형태의 저장소 이며, Local StorageSession Storage로 분류할 수 있다.

두 저장소의 차이점은 영구성과 범위에 있으며, 이를 표로 확인해보면 다음과 같다.

LocalSession
데이터 유지 브라우저 종료시 보관브라우저 종료시 삭제
데이터 범위동일한 도메인 전역 공유브라우저간 공유 불가능

먼저, Local Storage는 브라우저를 종료해도 데이터를 영구적으로 보관한다.

또한, 도메인이 동일하다면 전역으로 데이터를 공유할 수 있는 특성이 있다.

반대로 Session Storage는 브라우저가 종료되면 데이터가 삭제되며, 같은 도메인이여도 브라우저가 다르다면 브라우저별로 각각의 Session Storage가 형성되어 데이터 공유가 불가능하다.


Cookie

웹 사이트에 접속할 때 생성되는 정보를 담은 임시 파일

Cookie Web Storage 와 달리 서버와 클라이언트의 지속적인 데이터 교환을 위해 만들어졌다.

예를 들면 사용자가 서버로의 HTTP 요청을 보내면, 서버는 요청 자체만으로는 이 요청의 발신자를 확인할 수 없다.

그래서 쿠키에 요청 정보를 담아 서버에 보내게되면 서버는 쿠키를 읽어 발신자를 파악할 수 있다.

쿠키의 용량 제한은 4KB 이며, 한 사이트당 20개의 쿠키를 소유할 수 있다.

하지만 쿠키에 필요없는 값이 많이 포함되어 있다면 그만큼 네트워크 트래픽이 증가되므로 주의해야 한다.

쿠키의 대표적인 용도는 다음과 같다.

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

Web Storage, Cookie의 차이

Web StorageCookie 와 달리 서버에 전송되지 않고 명시적으로만 전송 가능하기 때문에 서버에 부담이 가지 않는다.

또한, 필요한 경우에 선택적으로 사용할 수 있어 자동 전송의 위험성이 없으며, 다른 Origin 이 요청할 때에는 Origin 단위로 접근이 제한되는 특성 때문에 사용할 수 없다.


사용방법

Web Storage

Local Storagewindow.localStorage, Session storagewindow.sessionStorage 에 위치하며 key-value 값으로 조회가 가능하다.

또한 저장된 데이터는 문자열로 저장되기 때문에 Object 데이터를 저장하면 key: {key: value} 형태가 아닌, key: [object object] 형태로 저장된다.


Create

Web StoragesetItem(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)); }

Read

Web StoragegetItem(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) }

Delete

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(); }

클라이언트 환경에서 쿠키를 사용하는 방법은 다음과 같다.


Create

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

Read

function getCookie(key) { 
	let value = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)"); 
	return value ? JSON.parse(value[2]) : null; 
}

Delete

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)

profile
memories Of A front-end web developer

0개의 댓글