Web Storage | Session Storage 와 Local Storage의 특징 및 차이점

Java랑 Spring을 공부할 때 session과 cookie에 대해서는 배운 적 있는데, vue를 공부하면서 유저정보를 저장할 곳으로 당연히 session을 떠올렸다가 Local Storage 개념을 알게되면서 클라이언트에서 관리하는 데이터 저장소인 Web Storage에 대해 살펴보고, 각 저장소의 특징 및 차이점을 정리해보았다.

 

그리고 기존에 알고있던 Spring의 session이랑 Web storage의 session storage는 관련이 없다고 한다. session은 서버에 데이터를 저장하고 쿠키에 session Id만 저장하는데, 브라우저의 session storage에 값이 저장되는 걸 보고 의아했는데 오해였다. 아래 두 링크는 같은 궁굼증을 가졌던 개발자들이 남긴 QnA이다.

 

🙏   참고한 QnA

• https://okky.kr/questions/683696
• https://okky.kr/questions/632359

 

 

 

1. Web Storage

• Session Storage 와 Local Storage 로 나뉜다
• key / value 로 구성되어있으며, value 는 문자열로 저장된다
• 크롬기준 개발자모드 > Application > Storage > Local Storage 에서 확인
• 쿠키의 단점을 개선하기 위해 추가된 클라이언트 저장소
  • 저장공간이 더 크다!
  • 데이터를 서버로 전송하지 않는다!

 

2. Session Storage vs Local Storage 특징 및 차이점

1) Session Storage

• 저장공간 : 최대 5mb ( 쿠키보다 크다 )
• 유효기간 : 있음
  • 브라우저를 종료하거나 탭을 닫으면 만료
  • 새 탭을 열면 데이터가 유지되지 않기 때문에 별도로 처리해야 함

2) Local Storage

• 저장공간 : 제일 크다
• 유효기간 : 없음
  
  • 컴퓨터를 종료하고 다음 날 확인했는데도 여전히 남아있는 것 확인했다!
  • javascript로 별도 처리하거나 캐시 or 로컬 저장소를 지워야 만료됨
  • 시크릿모드의 경우 마지막 탭을 닫으면 만료

 

 

3. 사용방법 및 주의사항

Local Storage 와 Session Storage는 사용법이 같아서 Local Stoage로 기록한다. 

 

1) 사용방법

//저장
localStorage.setItem('key', 'value');

//조회
localStorage.getItem('key');
-> return: 'value'

//길이
localStorage.length();
-> return: 1 (숫자)

//전체삭제
localStorage.clear();

 

2) 주의사항 : Web Storage의 value 는 문자열로 저장된다

//숫자, 논리, 객체를 저장해도...
localStorage.setItem('number', 1);
localStorage.setItem('obj', {a: 1, b: true});

//문자열로 저장된다
typeof localStorage.getItem('number');
-> return : 'string'
localStorage.getItem('obj');
-> return : '1'

typeof localStorage.getItem('obj');
-> return : 'string'
localStorage.getItem('obj');
-> return : '[object Object]'

//객체는 JSON으로 직렬화해서 사용할 수 있다
localStorage.setItem('json', JSON.stringify({a: 1, b: true}));
typeof localStorage.getItem('json');
-> return : 'string'

JSON.parse(localStorage.getItem('json'));
-> {a: 1, b: true}

 

• 덧붙여 데이터가 그대로 노출되기 때문에 유저정보 같은 민감한 데이터를 저장하기엔 적절하지 않을 것 같다. 다만 사이드 프로젝트 할 때 장바구니, 최근 조회한 글 기능을 cookie를 활용해서 백엔드 쪽에서 구현한 적 있는데, 다음에는  Web Storage를 활용해도 좋을 것 같다. 직장 상사분께 용례를 여쭤보니 상태관리 라이브러리와 함께 사용하면서, 여러 페이지에서 공통으로 사용하는 데이터를 저장하기도 한다고 하셨다.

 

 

🙏 출처 

• 로컬/세션 스토리지에 데이터 저장하기 by.달레의코드 Youtube 
• [MDN] Web Storage API 한국어 ver
• [MDN] Web Storage API