[JS] localStorage & sessionStorage 비교

 

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다.

sessionStorage

• 새로고침을 하여도 데이터가 사라지지 않고 남아있다.

 

localStorage

• 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다.

 

그런데, 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해서 데이터를 저장하는 걸까요?라는 의문이 든다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같다.

 

1. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이러한 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 내 웹 스토리지 구성 방식을 설정할 수 있다.
2. 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체조작은 모두 자바스크립트 내에서 수행된다.
3. 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진(Origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

 

sessionStorage & localStorage > 동일한 메서드와 프로퍼티 제공

setItem(key, value)	키-값 쌍을 보관
getItem(key)	키에 해당하는 값을 받아옴
removeItem(key)	키와 해당 값을 삭제
claer()	모든 것을 삭제
key(index)	인덱스(index)에 해당하는 키를 받아옴
length	저장된 항목 개수 반환

두 스토리지 객체는 Map과 유사하다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있다.

 

---

 

localStorage

• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
• 브라우저나  OS가 재시작하더라도 데이터가 파기되지 않는다.

아래 예시를 살펴보자

localStorage.setItem('test', 1);

그리고 브라우저를 닫고 열어봅시다. 다른 창에서 본 페이지를 열어봐도 됩니다. 그럼 이런 결과가 나올 겁니다.

 

alert( localStorage.getItem('test') ); // 1

오리진(domain/port/protocol)만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있습니다.

localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.

 

 

 

▶ localStorage의 키를 얻거나 설정할 때, 아래처럼 일반 객체와 유사한 방법을 사용할 수 있습니다.

// 키 설정하기
localStorage.test = 2;

// 키 얻기
alert( localStorage.test ); // 2

// 키 삭제하기
delete localStorage.test;

하위 호환성 때문에 아직 이런 방법이 지원되기는 하지만, 다음과 같은 이유로 추천하지 않습니다.

• 사용자는 length나 toString, localStorage의 내장 메서드를 키로 설정할 수 있습니다. 이렇게 되면 getItem, setItem은 정상적으로 작동해도, 일반 객체처럼 다룰 때 에러가 발생할 수 있습니다.

let key = 'length';
localStorage[key] = 5; // TypeError: Cannot assign to read only property 'length'...

• 데이터를 수정하면 storage 이벤트가 발생하는데, 이 이벤트는 localStorage를 객체처럼 접근할 땐 일어나지 않습니다.

 

 

▶ localStorage의 키를 얻거나 설정할 때, 아래처럼 일반 객체와 유사한 방법을 사용할 수 있습니다.

 

localStorage는 '키’를 사용해 값을 얻고, 설정하고, 삭제할 수 있게 해 줍니다. 그렇다면 키나 값 전체는 어떻게 얻을 수 있을까요? 아쉽게도 스토리지 객체는 iterable 객체가 아닙니다. 대신 배열처럼 다루면 전체 키-값을 얻을 수 있습니다.

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}

 

일반 객체를 다룰 때처럼 for key in localStorage 반복문을 사용해도 전체 키-값을 얻을 수 있습니다.

하지만 이 방법을 사용하면 필요하지 않은 내장 필드까지 출력됩니다.

// 좋지 않은 방법
for(let key in localStorage) {
  alert(key); // getItem, setItem 같은 내장 필드까지 출력됩니다.
}

 

for key in localStorage 반복문을 사용하려면 hasOwnProperty를 이용해 프로토타입에서 상속받은 필드를 골라내야 합니다.

for(let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue; // setItem, getItem 등의 키를 건너뜁니다.
  }
  alert(`${key}: ${localStorage.getItem(key)}`);
}

 

아니면 아래처럼 Object.keys로 '자기 자신’의 키를 받아온 다음 순회하는 방법을 사용할 수도 있습니다.

let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`);
}

Object.keys는 해당 객체에서 정의한 키만 반환하고 프로토타입에서 상속받은 키는 무시하기 때문입니다.

 

---

 

 

sessionStorage

• 현재 떠 있는 탭 내에서만 유지된다.
• 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다
• 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다.
• 페이지를 새로 고침 할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열면 사라진다.

 

이제 sessionStorage를 직접 사용해 봅시다.

sessionStorage.setItem('test', 1);

 

이제 페이지를 새로 고침 해 봅시다. 데이터가 여전히 남아있는 것을 확인할 수 있습니다.

alert( sessionStorage.getItem('test') ); // 새로 고침 후: 1

하지만 다른 탭에서 본 페이지를 열고 바로 위 예시만 실행해 보면 '아무것도 찾을 수 없다’는 뜻을 가진 null이 반환되는 것을 확인할 수 있습니다. 이렇게 sessionStorage는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있습니다. 이런 제약 때문에 sessionStorage는 잘 사용되지 않습니다.

 

Storage 이벤트

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

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

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

 

좀 더 구체적으로 설명을 이어나가 보겠습니다.

두 개의 창에 같은 사이트를 띄워놨다고 가정해 봅시다. 창은 다르지만 localStorage는 서로 공유됩니다.

 

실제 본 페이지를 두 개의 브라우저 창에 띄워 봅시다.

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

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

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

 

storage 이벤트의 또 다른 중요한 특징은 event.url이 있어 데이터가 갱신된 문서의 URL을 알 수 있다는 점입니다.

 

또한 event.storageArea에는 스토리지 객체가 포함되어 있는데, storage 이벤트는 sessionStorage나 localStorage가 변경될 때 모두 발생하기 때문에 event.storageArea는 스토리지 종류에 상관없이 실제 수정이 일어난 것을 참조한다는 것 역시 중요한 특징입니다. 변경이 일어났을 때 우리는 event.storageArea에 무언가를 설정해 '응답’이 가능하도록 할 수 있습니다.

 

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

 

참고

https://ko.javascript.info/localstorage

localStorage와 sessionStorage