[JavaScript] localStorage 와 sessionStorage

자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 대부분 데이터베이스 서버나 클라우드에 데이터를 저장하는 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 그럴 때 웹 스토리지를 사용할 수 있습니다.

 

html5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 web storage가 있습니다.

 

web storage는 키 / 값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회합니다.

영구저장소(localStorage)와 임시저장소(sessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. 

 

web storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됩니다. 

예를 들어, A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다는 것입니다. 이는 데이터의 보안 측면에서 당연합니다.

 

두 스토리지는 모두 window 객체 안에 들어 있습니다. Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재합니다.

도메인 별 용량제한도 있습니다. (프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유합니다.) 브라우저별로, 기기별로 다르긴 하지만 모바일은 2.5mb, 데스크탑은 5mb~10mb라고 생각하시면 됩니다. 

 

localStorage 💾 

// 로컬 스토리지에 값 세팅
localStorage.setItem('name', '녜힝');
localStorage.setItem('age', '20');

// 로컬 스토리지에서 값 가져오기
localStorage.getItem('name');  
localStorage.getItem('age');

// 로컬 스토리지에 있는 값을 삭제
localStorage.removeItem('age');

// 로컬 스토리지에 있는 값 전체를 삭제
localStorage.clear();

 

<< 사용 시 주의 사항 >>

- 오직 문자형(string) 데이터 타입만 지원합니다.

- 숫자형 데이터를 로컬 스토리지에 쓰고 다시 읽어오면 본래 숫자가 아닌 문자가 나옵니다.

- 웹 스토리지를 사용할 때 이런 문제를 피하기 위해서 많이 사용되는 방법이 JSON 형태로 데이터를 읽고 쓰는 것입니다.

// 데이터를 저장할 때
localStorage.setItem('person', JSON.stringify({name: '녜힝', age: 20}));

// 데이터를 꺼내올 때
JSON.parse(localStorage.getItem('person'));

 

sessionStorage 💾

세션 스토리지는 window.sessionStorage를 통해 사용할 수 있습니다. 

setItem, getItem, removeItem, clear, key 등 모든 메소드가 로컬 스토리지와 같습니다. 단지 로컬 스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다. 

 

 

localStorage와 sessionStorage 비교 🤔

 

localStorage	sessionStorage
사용자 세션 데이터를 유지할 수 있다.	브라우저 세션 기간 동안만 사용할 수 있으며 탭이나 창을 닫을 때 삭제된다.
브라우저를 닫았다가 다시 열었을 때도 지속된다.	새로고침을 해도 유지된다.
탭을 여러 개 열어도 공유된다.	변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다.
명시적으로 삭제될 때까지 지속된다.	탭이 닫히면 저장된 데이터가 삭제된다.
변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다.