[Web] localStorage와 sessionStorage 차이점

프로젝트 진행하다가 localStorage랑 sessionStorage를 의도하지 않게 많이 쓰다보니 궁금증이 생겨서 잠깐 메모

 

 

localStorage / sessionStorage 란?

web상에서 사용되고 있는 저장소이다. 이 둘의 차이점은 저장소의 기능은 동일하지만, sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다.

 

localStorage

• local에 도메인 별로 지속되는 storage
• localStorage는 시간제한이 없고, 브라우져가 종료되어도 사라지지 않는다. 해당 값을 삭제하려면 직접 삭제해야함

sessionStorage

• 세션이(프로세스, 탭, 브라우저) 종료될때까지 지속되는 storage. 세션이 종료되면 소멸된다.

 

쿠키(Cookie)와 localStorage 

localStorage와 더불어서 로컬 저장소를 웹에서 사용 할 때 많이 사용되는것중에 하나가 바로 쿠키다. 둘다 목적이 다르기 때문에 쓰임새에 따라 적절한 방법을 사용해야한다.

 

쿠키는 서버와 클라이언트 양쪽에서 쿠키 데이터를 사용하는 API가 존재하며, localStorage는 존재하지 않아 로컬 환경에서만 컨트롤 된다.

이런 경우엔 서버쪽 사용이 필수적이며, 주기적으로 일어난다면, 로컬 저장소가 아닌 쿠키의 사용이 더 효율적일 수 있다.

 

쿠키와 달리 로컬 스토리지는 자바스크립트의 객체를 넣는것이 가능하며, 문자열 크기에 제한이 있는 쿠키보다 우위를 가질 수 있다. 또한 세션을 이용 할 경우 req와 res시 모든 쿠키를 다 넘겨야해서 원래 비용이 큰 http 통신에 더 큰 부하를 줬는데, Storage를 사용 할 경우는 개발자가 선별해서 넘겨주면 되므로 http에 부하를 줄 일 수가 있다.

sessionStorage를 사용 할 경우 세션이 유지되는 동안만 필요한 데이터를 저장 할 수 있으며, 또한 쿠키의 경우 domain별로 데이터가 분리되지만, 같은 브라우저라면 값을 공유 할 수 있다. 하지만 sessionStorage는 다른 탭이라면 데이터를 공유 할 수 없다. 만약 데이터 공유가 필요할 때에는 localStorage를 이용하면 된다.

 

※ Tip

1. 제한

• 쿠키 - 용량제한, 시간제한, 갯수제한 존재
• 스토리지 - 용량제한만 존재

2. 시간제한 설정

• 쿠키 - 시간제한 설정가능
• 스토리지 - 시간제한 설정 불가능

3. 데이터형

• 쿠키 - 문자열만 저장가능
• 스토리지 - 자바스크립트 객체 저장 가능

4. 데이터 전송

• 쿠키 - 모든 쿠키를 전송해야함. 쿠키를 가공함으로써 발생하는 사이드 이펙트가 존재
• 스토리지 - 개발자가 선택 및 가공해서 전송 할 수 있음.

5. 세션의 정의

• 쿠키 - 같은 브라우저면 다른 탭이나 다른 창(프로레스) 일지라도 같은 세션으로 정의
• 스토리지 - 같은 브라우저라도 sessionStorage의 경우 다른 탭이면 다른 세션으로 정의

6. 이벤트

• 쿠키 - 이벤트 없음
• 스토리지 - 이벤트 존재

localStorage / sessionStorage 사용방법

localStorage 사용법

데이터 저장

localStorage.roma = '123'; // 리터럴 방식
localStorage.setItem('roma', '123'); // 메소드 방식

​데이터 불러오기

localStorage.roma; // 리터럴 방식
localStorage.getItem('test'); // 메소드 방식
localStorage.getItem(); // 인자를 안주면, 전체 값 받아오기
localStorage.length // 항목 갯수 반환
localStorage.key(0); // 인자(인덱스)에 해당하는 key의 value값을 받아온다.

​데이터 삭제

localStorage.removeItem('roma'); //localStorage 객체에서 원하는 값을 지우는 방법
localStorage.clear(); // 한번에 저장된 모든 값을 삭제하는 방법

JSON을 이용한 배열과 객체 저장

localStorage.user = JSON.stringify({name: "Roma"});
let user = JSON.parse(localStorage.user);
console.log(user.name); //Roma

let arr = [1,2,3,4,5]
localStorage.setItem('data', JSON.stringify(arr));
let output = localStorage.getItem('data');
let arr = JSON.parse(output);
console.log(arr) // [1,2,3,4,5]

​sessionStorage 사용법

문법의 경우 localStorage와 거의 동일하다. sessionStorage는 세션 기준으로 데이터가 저장 및 유지되기 때문에 이 객체에 저장되는 데이터들의 수명은 일시적이다. 만약 세션이 종료될 경우 브라우저가 닫히거나 일정시간동안 동작의 변화가 없다면, 저장된 값은 삭제가 된다.

sessionStorage.setItem("name", "RomaMan"); //domain이란 키(key) 값을 사용하여 해당 텍스트를 저장
sessionStorage.getItem("name"); // 키에 저장된 값을 반환. RomaMan이 출력된다.
sessionStorage.removeItem("name"); //name 키와 데이터 모두 삭제
sessionStorage.clear(); // 저장된 모든 값 삭제