LocalStorage 와 SesseionStorage

5_wintaek·2025년 3월 19일

localStorage 와 SessionStroage

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 둘 다 저장공간으로 사용할 수 있는데 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점입니다.

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.

setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.

localStorage

로컬스토리지를 한번 봐볼까요 ?

오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.
오리진은 프로토콜(http,https), 호스트(example.com),포트(:80) 의 조합
유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.
저장 공간이 셋 중 제일 큽니다.

아래 예제를 실행해볼까요?

localStorage.setItem('test', 1);

그리구 브라우저를 닫고 열어보거나 아니면 다른창에서 열어봐도 됩니다. 그러면 밑에와 같이 결과가 나옵니다. 참고로 두개 이미지는 다른 탭에서 실행한 결과입니다!

sessionStorage

보통 세션이라는 의미는 일반적으로 브라우저의 '종료'라고 뜻하는데요
새창을 띄우건 새탭을 띄우건 이 행위는 세선종료를 뜻하지 않습니다.

sessionStoarge는 탭 단위로 독립적입니다.
즉, 각 브라우저 탭은 자신만의 sessionStorage를 가지며, 서로 다른 탭 간에는 데이터가 공유되지 않습니다.
따라서 값도 침범을 할 수 없는것이죠.
데이터를 절대 서버로 전송하지 않습니다.
저장 공간이 쿠키보다 큽니다. (최대 5MB)

하지만 예외도 있습니다. 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됩니다.

여기서 iframe 이란 예를들어, 유튜브 동영상을 웹 페이지에 넣거나, 다른 웹 사이트의 내용을 현재 페이지에 표시할 떄 사용된다고 생각하시면 편합니다!

위에서 설명드린것 처럼 세션은 새로고침을 하면 null 이 반환되는것을 확인할 수 있습니다.

storage 이벤트

localstorag 나 sessionStorage의 데이터가 갱신될 때, storage 이벤트가 실행됩니다. storage 이벤트는 다음과 같은 프로퍼티를 지원합니다.

여기서 storage이벤트란 저장 공간이 변경될 떄 Window 객체에서 발생합니다.

event.key: 변경된 데이터의 키(key)입니다.
event.newValue: 변경된 새로운 값입니다.
event.oldValue: 변경 전의 값입니다.
event.url: 데이터가 변경된 문서의 URL입니다.
event.storageArea : 갱신이 일어난 localStorage나 sessionStorage 객체

여기서 중요한 점은 storage 이벤트가 이벤트를 발생시킨 스토리지를 '제외'하고 스토리지에서 접근 가능한 window 객체 전부에서 일어난다는 사실입니다.

예시를 들어보겠습니다. 두 개의 창에 같읕 사이트를 띄워놨다고 가정합니다.이러면? 창은 다르지만 localstorage는 서로 공유됩니다.

두 개의 브라우저 창에 띄워봅시다. 두 창에서 모두 storage 이벤트를 수신하고 있기 때문에 한 창에서 아래 예시를 실행해 데이터를 갱신하면 다른 창에 해당 사항이 반영되는 것을 확인할 수 있습니다.

아래 이미지를 보면 두 개의 브라우저 창에서 storage 이벤트를 발생시키니 다른 창에서도 localstrage 값이 저장되는것을 확인할 수 있습니다.

// 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
window.onstorage = event => => {와 같습니다.
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
};

localStorage.setItem('now', Date.now());

여기서 now의 value값을 한번 바꿔보면 아래와 같은 alert 창이 나옵니다.

storage이벤트의 또 다른 특징은 evert.url이 있어 데이터가 갱신된 문서의 URL을 알 수 있다는 점입니다.
또한 event.storageArea에는 스토리지 객체가 포함되어 있는데, storage 이벤트는 session,local 이 변경될 때 모두 발생하기 때문에 evet.stroageArea는 스토리지 종류 상관없이 실제 수정이 일어난 것을 참조한다는 것 역시 중요한 특징입니다. 변경이 일어났을 때 우리는 event.storageArea에 무언가를 설정해 '응답'이 가능하도록 할 수 있습니다.

이런 특징을 이용하면 오리진이 같은 창끼리 메시지를 교환하게 할 수 있습니다.

모던 브라우저는 오리진이 같은 창끼리 통신할 수 있도록 해주는 브로드캐스트 채널 API(broadcast channel API)Visit Website를 지원합니다.