[Javascript] LocalStorage, SessionStorage에 저장하기 / 브라우저별 Storage 용량 제한
개발을 하다보면 Session에 정보를 저장이 필요할 때가 있다.
이런 경우 sessionStorage를 이용하면 쉽게 해결된다.
해당방법은 javascript이용한 개발때 이용이 가능함
0. sessionStaroage, localStorage 사용이유
브라우저 탭 내 refresh내도 해당 session정보는 그대로 저장됨
페이지 들어와서 정보를 일정기간 동안 가지고 싶을 때(세션이 있는 동안 가능)
글 작성 중간 잃어버리지 않기 위한 임시 저장 가능
방문자 이동경로 저장하였다가 이동할 때
서버와 커넥션없이 저장필요할 때
1. SessionStorage 이용하기
1) session에 저장
sessionStorage.setItem('userName', 'felix')
2) session에서 정보 가져오기
sessionStorage.getItem('userName')
2. localStorage 이용하기
- 세션유지와 상관없이 데이터 유지되게 함
- SessionStorage는 일시적인 수명을 가지게 되지만, 데이터 삭제가 안되게 하려면 localStorage를 사용해야 함
1) localStorage에 저장
localStorage.setItem('userName', 'felix')
2) localStorage에서 정보 가져오기
localStorage.getItem('userName')
3) 최대 저장 용량 : IE, Chrome, Firefox, Opera : 10MB (Desktop 기준)
데스크톱과 모바일에 따라 저장 용량이 다른데 아래 참고 바랍니다.
Reference : storage limit
https://www.html5rocks.com/en/tutorials/offline/quota-research/