Web
Web Storage | Session Storage 와 Local Storage의 특징 및 차이점
devkmee
2023. 12. 27. 22:13
vue를 공부하면서 유저정보를 저장할 용도로 클라이언트에서 관리하는 데이터 저장소인 Web Storage에 대해 살펴보고, 각 저장소의 특징 및 차이점을 정리해보았다.
그리고 기존에 알고있던 Spring의 session이랑 Web storage의 session storage는 관련이 없다고 한다.
session은 서버에 데이터를 저장하고 쿠키에 session Id만 저장하는데, 브라우저의 session storage에 값이 저장되는 걸 보고 의아했는데 오해였다.
아래 두 링크는 같은 궁굼증을 가졌던 개발자들이 남긴 QnA이다.
🙏 참고한 QnA
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를 활용해도 좋을 것 같다. 직장 상사분께 용례를 여쭤보니 상태관리 라이브러리와 함께 사용하면서, 여러 페이지에서 공통으로 사용하는 데이터를 저장하기도 한다고 하셨다.
🙏 출처