[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/