728x90
로컬 스토리지와 세션 스토리지에 대해 정리하는 포스팅이다. 웹 개발자로써 무지를 반성하며 작성.
로컬 스토리지와 세션스토리지는 HTML5에서 추가된 저장소이다. 간단하게 key - value로 저장할 수 있다.
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이고 이것을 제외하고 모든 아래에서 예시와 자세히 알아보자.
1. 로컬 스토리지
로컬 스토리지는 사용자가 데이터를 지우지 않는 이상 브라우저에 계속 남아있다. 브라우저 탭을 닫아도 해당 주소에 다시 재접속하면 로컬스토리지에 저장된 데이터를 사용할 수 있다. 로컬 스토리지는 window.localstorage 로 접근하여 사용할 수 있다.
- 데이터 저장 및 조회
localStorage.setItem('name', '홍길동');
localStorage.setItem('age', 20);
localStorage.getItem('name'); // 홍길동
localStorage.getItem('age')// 20
localstorage.setItem(키, 값)으로 로컬스토리지에 저장한 후 localstorage.getItem(키) 로 조회가 가능하다.
값으로는 문자열, boolean, 숫자 모두 저장할 수 있지만 모두 문자열로 변환된다.
- 데이터 삭제
localStorage.removeItem('age');
localStorage.getItem('age'); // null
localStorage.clear(); // 전체 삭제
2. 세션 스토리지
로컬 스토리지와 차이점은 데이터가 영구적으로 보관되지 않고 각 세션마다 데이터가 개별적으로 저장된다. 브라우저에 여러개의 탭을 실행하고 같은 도메인으로 들어가도 세션마다 데이터가 개별적으로 저장된다. 탭을 닫아서 세션을 종료하게 되면 데이터가 자동으로 제거된다.
그 이외 사용
3. 차이점 정리
로컬 스토리지와 세션 스토리지의 차이점을 간단하게 정리하면 아래의 표와 같다.
| 로컬 스토리지(localStorage) | 세션 스토리지(sessionStorage) | |
| 데이터 수명 | 지우지 않으면 영구적 | 탭을 닫거나 브라우저 종료시 초기화 |
| 접근 방법 | window.localStorage | window.sessionStorage |
| 데이터 형태 | key- value 형태의 pair(key와 value는 무조건 문자열로 저장됨) | |
| 메소드 | 사용하는 메소드가 동일 | |
4. 사용처
- 로컬 스토리지: 지속적으로 필요한 데이터 저장이 필요할 때
- 자동 로그인
- 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
- 일회성 로그인, 입력 폼 저장, 비로그인 장바구니
