[js] localStorage vs sessionStorage vs cookie

예전에는 데이터를 클라이언트 사이드에서 저장할 수 있는 방법은 cookie를 사용하는 것이었다. 하지만 cookie의 서버 부하와 용량 제한 등을 보완한 Web Storage가 HTML5에서 추가되었다. (🤔 아마 UX에 대한 중요성이 높아지며만들어진 것이이 아닐까생각해 본다.))

Cookie vs Web Storage(localStorage, sessionStorage)

공통점 : 사이트의 도메인 단위로 접근이 제한, 클라이언트 사이드 데이터

Cookie

• 정의 : 각각의 브라우저에서 각각의 host 별로 사용자의 컴퓨터에 db 형태로 저장된 key-value 형식의 데이터 묶음
• 제한 : 용량 제한(3~5kb), 시간제한, 개수 제한
• 시간제한 설정 o, 만료 일자 지정해야 함
• 데이터형 : 문자열만 가능
• 모든 웹 요청은 모든 쿠키 정보를 포함하여 서버로 전송됨
• 이벤트 x
• domain 별로 데이터가 분리되지만 같은 브라우저라면 값을 공유

Web Storage(localStorage, sessionStorage)

• 제한: 용량 제한(하지만 쿠키에 비해 압도적으로 많음 약 5MB)
• 시간제한 설정 x, 영구적으로 저장 가능
• 데이터형 : 문자열 데이터, javascript 객체로 저장 가능. (원래 문자열만 저장, 반환하기 때문에 JSON 형태로 데이터 읽고 씀.)
• 서버에 전송되는 부분을 개발자가 선택 가공할 수 있음
• 이벤트 o

localStorage

• 도메인마다 별도로 로컬 스토로지가 생성
• 영구적으로 보관이 가능(필요에 의해 삭제도 가능)
• domain 별로 데이터가 분리되지만 같은 브라우저라면 값을 공유

sessionStorage

• 여기의 세션은 탭 단위
• 세션이 유지되는 동안만 필요한 데이터를 저장됨
• 다른 탭이라면 데이터가 공유되지 않음

Web storage 기본 API

• 기본적으로 key 와 value로 데이터를 저장할 수 있음.

// 데이터 저장
localStorage.setItem("key", value);

// 데이터 읽기
localStorage.getItem("key");

// 데이터 삭제
localStorage.removeItem("key");

// 모든 데이터 삭제
localStorage.clear();

//  저장된 데이터 항목의 수를 반환
localStorage.length;

// 주어진 숫자 n에 대하여 저장소의 n번째 항목 키를 반환
localStorage.key(n)

MDN Window.localStorage

StorageEvent

• Web Storage는 쿠키와 다르게 event 가 있다.
• 저장소가 다른 문서에서 변경될 경우만 발생됨.

window.addEventListener('storage', () => {});

Properties

• key : 변경된 키를 나타냄 clear() 메소드를 사용한 경우 -> null.
• newValue : 키의 새로운 값. clear()메소드 or 저장소 키 제거 -> null
• oldValue: 키의 원래 값. 키가 새로 추가된 경우 -> null
• storageArea: 영향받은 Storage 객체
• url : 키가 변경된 문서의 URL

StorageEvent

JSON

사용 이유: Web Storage는 문자열 데이터만 취급하기 때문

데이터 저장할때

localStorage.setItem('key', JSON.stringify({value}));

데이터 읽을때

JSON.parse(localStorage.getItem('key'))

<참고 사이트>
[자바스크립트] 웹 스토리지 (localStorage, sessionStorage)
쿠키 vs 로컬스토리지: 차이점은 무엇일까?
[Web][조금 더 자세히]cookie는 너무 구식아냐? 이제부턴 Web Storage!
[Web][조금 더 자세히]서버와 클라의 연결고리, 상태를 서버에 저장하는 http session, cookie와의 비교
[Web][조금 더 자세히]도대체 왜 이름이 쿠키인걸까?, 상태를 저장하는 http cookie