localStorage vs sessionStorage

localStorage와 sessionStorage는 둘 다 저장소로서의 기능은 대부분 동일하다.

하지만 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다는 점이 다른점이다.

• localStorage
  • 로컬에 도메인 별로 지속되는 storage
  • localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.
  • 값을 지우려면 직접 지워줘야한다.
• sessionStorage
  • 세션이 (프로세스, 텝, 브라우저) 종료될 때까지 지속되는 storage
  • localStorage는 소멸 타이밍이 없다. 즉 직접 지워야한다. 그리나 sessionStorage는 세션의 종료시 죽음을 맞이한다.

쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재한다.

이와 달리 localStorage는 로컬환경에서만 컨트롤된다.

또한 localStorage는 기간 기능이 없어서 소멸 기간을 정해주지 못한다.

localStorage는 자바스크립트 객체 자체를 넣는 것이 가능하다

sessionStorage는 다른 탭이라면 데이터가 공유되지 않는다.

localStorage의 키와 값은 반드시 문자열이어야한다. 다른 자료형을 사용하게 되면 문자열로 자동 변환된다.

localStorage와 sessionStorage의 데이터가 갱신될 때 storage 이벤트가 실행이 된다.

• key - 변경된 데이터의 키
• oldValue - 이전 값(키가 새롭게 추가되었다면 null)
• newValue - 새로운 값(키가 삭제되었다면 null)
• url - 갱신이 일어난 문서의 url
• storageArea - 갱신이 일어난 localStorage나 sessionStorage 객체

event.storageArea에는 스토리지 객체가 포함되어 있다. storage 이벤트는 sessionStorage나 localStorage가 변경될 때 모두 발생하기 때문에 스토리지 종류에 상관없이 실제 수정이 일어나면 응답이 가능하다.

참고

• https://inpa.tistory.com/entry/JS-📚-localStorage-sessionStorage
• https://inpa.tistory.com/entry/JS-📚-쿠키Cookie-다루기