로컬 스토리지와 세션 스토리지는 생명주기에 대해서 차이가 난다. 로컬 스토리지의 경우 사용자가 데이터를 지우지 않는 이상 계속 브라우저에 남아 있다. 하지만 세션 스토리지는 브라우저를 종료하거나 탭을 닫을 경우 제거가 된다. 그리고 보안에 취약점이 있기 때문에 중요한 정보(비밀번호 등)은 절대 저장하지말고 로컬 스토리지를 사용할 경우 암호화를 하는것이 좋다.
web storage 는 쿠키와 비슷하지만 차이점이 있다. cookie에서는 용량제한, 시간제한, 갯수제한이 있다. 물론 web Storage도 용량에 대한 제한은 있지만 쿠키의 용량 제한이 3~5KB 인것에 비해 web storage 는 5MB(브라우저 마다 다름) 정도를 사용할 수 있다.
사용법
//setItem(key, value) - key-value 값을 쌍으로 보관
localStorage.setItem('testWord', '로컬스토리지 테스트 중입니다.');
sessionStorage.setItem('testWord', '세션스토리지 테스트 중입니다.');
//getItem(key) - key에 해당하는 value를 받아온다.
console.log(localStorage.getItem(testWord)); // '로컬스토리지 테스트 중입니다.'
console.log(sessionStorage.getItem(testWord)); // '세션스토리지 테스트 중입니다.'사용 용도
- 자동 로그인 - 로컬스토리지
- 입력 폼 정보 - 세션스토리지
- 비로그인 장바구니 세션스토리지
- 다시 보지 않음 팝업 창 - 쿠키
요약
key와value의 값은 반드시 문자열이어야 한다.- 제한 용량은 5MB 이상인지만 브라우저에 따라 다를 수 있다.
- 파기되지 않는다.
- 오리진에 묶여있다.
차이점
localStorage |
sessionStorage |
|---|---|
| 오리진이 같은 탭, 창 전체에 공유 | 오리진이 같은 브라우저 탭, iframe에 공유 |
| 브라우저를 껏다 켜도 남아있다. | 페이지를 새로고침 해도 남아있다. 하지만 탭이나 브라우저 종료하면 사라진다. |
API
setItem(key, value)- key, value 쌍을 보관한다.getItem(key)- 키에 해당하는 값을 받아온다.removeItem(key)- 키와 해당 값을 삭제한다.clear()- 모든 것을 삭제한다.key(index)- index에 해당하는 키를 받아온다.length- 저장된 항목의 개수를 얻는다.Object.keys를 사용해 키 전체를 얻을 수 있다.- 객체 프로퍼티처럼 키에 접근할 수 있는데, 이 경우
storage이벤트가 발생하지 않는다.
