Intro

프론트에서 데이터를 저장해야 할 때 고려해볼 수 있는 웹저장소 중의 하나입니다.
splash화면을 만들 때, 메인 페이지에 처음 접속할 때만 나타나야하는 특수성 때문에 어디에 저장해놓고 써야할 지 고민하다가 Session Storage에 대해 알게 되었습니다.

Session Storage란?

윈도우나 브라우저의 탭을 닫을 때까지만 유효한 저장소입니다. splash 화면은 처음 접속했을 때만 나온다는 특징이 있으므로 해당 탭이 열릴 때까지만 유효한 점이 딱 맞아 떨어졌습니다.

사용법

API

setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.
Object.keys를 사용해 키 전체를 얻을 수 있습니다.
객체 프로퍼티처럼 키에 접근할 수 있는데, 이 경우 storage 이벤트가 발생하지 않습니다.

storage 이벤트

setItem, removeItem, clear를 호출할 때 발생합니다.
연산(key/oldValue/newValue)과 관련된 데이터 전체와 문서 url, 스토리지 객체 storageArea를 가지고 있습니다.
이벤트가 생성된 곳을 제외하고 스토리지에 접근하는 모든 window 객체에서 일어납니다(sessionStorage는 탭 내에서, localStorage에서는 전역에서).