localStorage와 sessionStorage

유자차 😛·2021년 11월 9일
3
post-thumbnail

요즘 내 자신에 대해 기본기가 많이 부족하다는 생각이 들었다. 물론 완벽할 순 없지만 기본에 충실하자는 가짐으로 접근을 했다. 최근 바닐라 자바스크립트를 공부하던 중 Web Storage에 대해 알게되었고, 나에게 흥미롭게 작용한 부분이 지금 이 글을 쓰게 되는 이유다. 프론트 개발을 할 때 데이터를 등록하고 새로고침이 되었을 때 데이터가 사라진다. 등록된 데이터는 저장되는 공간이 따로 없고 Element에 추가가 되면서 새로고침을 하면 DOM이 다시 렌더링 되면서 기존 소스로 되돌아가면서 사라진다. 임시로 데이터를 유지시킬 수 있는 방법이 뭐가 있을까? 라는 생각을 하며 찾던 중 Web Storage에 대해 알게되었다. Web Storage는 key-value 형태로 저장할 수 있는 저장소이며, localStoragesessionStorage를 제공한다.

localStorage와 sessionStorage에 대해 정리를 할 필요성이 있어 이 글을 작성하기로 하였다.

localStorage

  • 데이터 유효기간 없이 데이터가 저장된다.
  • 브라우저를 닫았다가 켜도 데이터가 남아있다.
  • 도메인별로 storage가 생성된다.
  • 새로고침을 해도 데이터가 유지된다.

👇 localStorage 생성

Chrome 개발자 도구 Console에서 아래 코드와 같이 생성해준다.

window.localStorage.setItem('tea', '유자차');

👇 localStorage 조회

window.localStorage.getItem('tea');

결과

> '유자차'

Application 탭을 클릭하고 Storage -> Local Storage에서 아래와 같이 데이터가 저장된 것을 확인할 수 있고, 브라우저를 닫았다가 다시 동일한 도메인으로 접속을 하여도 아래와 같이 데이터가 존재하는 것을 볼 수 있다.

👇 localStorage 삭제

window.localStorage.clear();

결과

window.localStorage.getItem('tea');
> null



sessionStorage

  • 브라우저가 닫히기 전까지만 즉, 세션이 종료될 때 까지 데이터가 존재한다.
  • 브라우저 탭마다 세션 저장소가 다르다.
  • 새로고침을 해도 데이터가 유지된다.

👇 sessionStorage 생성

window.sessionStorage.setItem('tea', '유자차');

👇 sessionStorage 조회

window.sessionStorage.getItem('tea');

결과

> '유자차'

sessionStorage도 localStorage와 동일하게 아래와 같이 Storage에 저장된다.

하지만!

sessionStorage는 localStorage와 다르게 브라우저 창을 닫으면 session이 소멸되며 storage가 사라진다. 브라우저 창이 닫힐 때 까지 storage에 있는 데이터는 유지된다.

👇 sessionStorage 삭제

window.sessionStorage.clear();

결과

window.sessionStorage.getItem('tea');
> null

localStorage와 sessionStorage를 간략하게 알아보았다. 그 외 많은 함수가 존재하며 다양한 방법으로 데이터를 조작할 수 있다!










profile
프론트엔드 개발자가 되고싶은 개발자

4개의 댓글

comment-user-thumbnail
2021년 11월 13일

글이 깔끔하고 이해하기 쉽네요! 감사합니다

1개의 답글
comment-user-thumbnail
2021년 11월 18일

글 감사합니다!!

1개의 답글