[프론트엔드] 브라우저 저장소 학습하기

브라우저에는 개발자가 활용할 수 있는 저장 공간이 존재한다. 프론트엔드 개발자라면 브라우저 저장소를 자주 다루게 되므로 브라우저 저장소에 대해서는 확실하게 이해하고 있어야한다.

이론 : 브라우저 저장소

브라우저 저장소 분류

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

웹 스토리지(Web Storage)

웹 스토리지는 HTML5에 추가된 클라이언트 기반 ‘key-value’ 형식의 저장소이며, 웹 스토리지는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 분류된다.

두 저장소의 차이는 영구성과 범위에서 나타난다.

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

로컬 스토리지는 브라우저를 동료하여도 데이터가 보관되며, 다른 브라우저로 접속하더라도 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있다.

그에 반해 세션 스토리지는 브라우저가 종료되면 데이터가 삭제되며, 도메인이 같아도 브라우저가 다르면 데이터가 공유되지 않는다.

저장공간의 limit는 브라우저 및 기기에 따라 상이하기 때문에 필요에 따라 찾아보는 것이 더 좋다. 수 많은 브라우저와 기기를 모두 외우고 있기에는 비효율적이다.

쿠키 (Cookie)

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

쿠키의 목적

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

웹 스토리지와 쿠키의 차이

웹 스토리지는 쿠키와 달리 서버에 전송되지 않고 명시적으로만 전송 가능하기 때문에 서버에 부담이 가지 않는다. 필요할 때만 꺼내서 쓰는 것이기 때문에 자동 전송의 위험성이 없으며, 다른 오리진이 요청할때에는 꺼내 쓰고 싶어도 오리진 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸 수 없습니다. 웹 스토리지는 쿠키에 비해 용량이 넉넉하다. 쿠키는 사용자 개인정보 보호 등에 대한 이슈도 있으므로 사용에 대해서는 신중하게 검토해야한다.

실습 : 브라우저 저장소

로컬 스토리지 / 세션 스토리지

• 위치
  • 로컬 스토리지 : window.localStorage
  • 세션 스토리지 : window.sessionStorage

‘key-value’ 값으로 조회가 가능하며, 데이터는 문자열로 변환되어 저장되므로 신경써야한다. 객체나 배열을 그대로 넣을 수 없어 반드시 가공해 주어야한다.

저장 방법

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

// key에 해당하는 이름으로 value 값을 저장합니다. 이때 JSON.stringify() 함수를 이용하여 value 값을 문자열로 변환합니다.

조회 방법

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

// key에 해당하는 이름으로 저장된 값을 가져옵니다. 이때 JSON.parse() 함수를 이용하여 가져온 값을 객체 또는 배열로 변환합니다.

/* INDEX로 KEY 조회 */ 
//로컬 
function getLocalStroageKey(index){ return localStorage.key(index) } 
//세션 
function getSessionStorageKey(index){ return sessionStorage.key(index) }

// index에 해당하는 순서에 있는 키(key) 이름을 가져옵니다.

삭제 방법

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

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

/* 
key, value, day 세 가지 인자를 받습니다. key는 쿠키의 이름, value는 쿠키의 값, day는 쿠키가 유효한 날짜 수를 의미합니다. day는 기본값으로 1이 설정되어 있으며, 따로 값을 전달하지 않을 경우 1일 동안 쿠키가 유지됩니다.

함수 내부에서는 현재 날짜와 day를 이용하여 만료일자를 계산하고, document.cookie 속성을 사용하여 쿠키를 설정합니다. 이때 JSON.stringify() 함수를 사용하여 value 값을 문자열로 변환하여 저장하고, expires 속성에는 만료일자를 UTC 시간으로 변환하여 설정합니다. 또한, path 속성에는 /를 설정하여 현재 도메인의 모든 경로에서 쿠키를 사용할 수 있도록 합니다.
*/

조회 방법

function getCookie(key) { 
	let value = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)"); 
	return value ? JSON.parse(value[2]) : null; 
}
/*
함수 내부에서는 document.cookie 속성을 사용하여 모든 쿠키를 문자열로 가져온 후, 정규식을 이용하여 key에 해당하는 쿠키 값을 추출합니다. 이때 JSON.parse() 함수를 사용하여 쿠키 값을 객체 또는 배열 형태로 변환하여 반환합니다.

match() 함수의 인자로 전달된 정규식 (^|;) ?" + key + "=([^;]*)(;|$)는 다음과 같은 역할을 수행합니다.

(^|;): 시작 위치가 문자열의 시작 또는 세미콜론(;)인 경우
?: 공백 문자가 0개 또는 1개인 경우
" + key + =: 쿠키 이름과 key 값을 가진 문자열
([^;]*): 세미콜론(;)을 제외한 모든 문자열
(;|$): 세미콜론(;) 또는 문자열의 끝($)인 경우
위 정규식을 통해 key 값과 일치하는 쿠키의 값을 추출하고, JSON.parse() 함수를 이용하여 해당 값의 형태를 객체 또는 배열 등으로 변환하여 반환합니다. key 값과 일치하는 쿠키가 없을 경우에는 null을 반환합니다.
*/

삭제 방법

function removeCookie(key) { 
	let date = new Date(); 
	document.cookie = key + "= " + "; expires=" + date.toUTCString() + "; path=/"; 
}
/*
함수는 key에 해당하는 이름을 가진 쿠키를 삭제하는 함수입니다.

함수 내부에서는 현재 날짜를 이용하여 쿠키의 만료일자를 과거 날짜로 설정하여 쿠키를 삭제합니다. 이때 document.cookie 속성을 사용하여 key 이름을 가진 쿠키를 찾아 제거하고, expires 속성에는 과거 날짜를 설정하여 쿠키가 즉시 만료되도록 합니다. path 속성에는 /를 설정하여 현재 도메인의 모든 경로에서 쿠키를 삭제할 수 있도록 합니다.
*/

이제 웹 스토리지와 쿠키를 구분하고 설명할 수 있게 되었다.