Skip to main content

4.2 localStorage와 sessionStorage

  • 1.쿠키와 다르게 웹 스토리지는 네트워크 요청과 무관하다.
    • 그래서 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다.
  • 2.웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있습니다.
    • 프로토콜, 서브 도메인 별로 격리가 가능함.
  • 3.문자열만 사용

Interface​

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

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

localStorage.setItem('test', 1);

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

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}
---
// 참고
// 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)}`);
}

sessionStorage​

제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문입니다.

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

storage 이벤트​

이러한 웹스토리지는 이벤트를 발생시키며, window간의 데이터 동기화가 가능하다.

storage 이벤트:

  • setItem, removeItem, clear를 호출할 때 발생합니다.
  • 연산(key/oldValue/newValue)과 관련된 데이터 전체와 문서 url, 스토리지 객체 storageArea를 가지고 있습니다.
  • 이벤트가 생성된 곳을 제외하고 스토리지에 접근하는 모든 window 객체에서 일어납니다(sessionStorage는 탭 내에서, localStorage에서는 전역에서).
// 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
window.onstorage = event => { // window.addEventListener('storage', () => {와 같습니다.
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
};

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