브라우저에 데이터 저장하기 - localStorage와 sessionStorage

localStorage와 sessionStorage

• 웹 브라우저 객체(web storage object)
• 브라우저 내에 키-값 쌍을 저장할 수 있게 해 줌.
• 페이지를 새로고침하거나(sessionStorage), 브라우저를 다시 실행해도(localStorage) 데이터 유지 가능.
• 동일한 메서드와 프로퍼티 제공
  • setItem(key, value) – 키-값 쌍을 보관.
  • getItem(key) – 키에 해당하는 값을 받아옴.
  • removeItem(key) – 키와 해당 값을 삭제.
  • clear() – 모든 것을 삭제.
  • key(index) – 인덱스(index)에 해당하는 키를 받아옴.
  • length – 저장된 항목의 개수를 얻음.
• Map과 유사(setItem/getItem/removeItem을 지원) / 인덱스를 사용해 키에 접근할 수 있다는 차이 존재(key(index))

vs Cookie?

• 쿠키와 달리, 웹 스토리지 객체는 네트워크 요청 시 서버로 전송X → 쿠키보다 더 많은 자료 보관 가능.
  (대부분의 브라우저가 최소 2MB ~ 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줌)
• 브라우저 내 웹 스토리지 구성 방식 설정 가능.
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음.
  • 웹 스토리지 객체 조작은 모두 JS 내에서 수행됨
• 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여 있음 
  → 프로토콜과 서브 도메인이 다르면 데이터 접근 불가!

localStorage

• origin이 같은 경우 데이터는 모든 탭과 창에서 공유.
• 브라우저나 OS가 재시작하더라도 데이터 파기X

키 순회하기

• localStorage는 '키'를 사용해 값을 얻고, 설정하고, 삭제할 수 있음 → 키나 값 전체를 얻는 방법?
  • 스토리지 객체 ≠ iterable
  • 배열처럼 다뤄 전체 키-값 얻는 방법 존재

// 일반 객체처럼 for key in localStorage 반복문 사용
// getItem, setItem 같은 내장 필드까지 출력 -> 좋지 않음
for(let key in localStorage) {
  alert(key); 
}


// hasOwnProperty를 이용해 프로토타입에서 상속받은 필드를 골라내는 방법
for(let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue; // setItem, getItem 등의 키를 건너뜁니다.
  }
  alert(`${key}: ${localStorage.getItem(key)}`);
}


// '자기 자신’의 키를 받아온 다음 순회하는 방법
let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`);
}

문자열만 사용

• localStorage의 키와 값은 반드시 문자열.
  • 다른 자료형 사용시 → 문자열로 자동 변환됨.

sessionStorage

• 현재 떠 있는 탭 내에서만 유지.
  • 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문!
  • 그런데 하나의 탭에 여러 개의 iframe이 있는 경우에는 sessionStorage 공유됨
    (동일한 origin에서 왔다고 취급되기 때문)
• 페이지 새로고침 시에는 저장된 데이터 사라지지X → but 탭을 닫고 새로 열 때는 사라짐.
• 제공하는 프로퍼티와 메서드는 같지만 훨씬 제한적 → localStorage에 비해 덜 사용됨.

storage 이벤트

• localStorage나 sessionStorage의 데이터가 갱신될 때, storaage 이벤트 실행됨!
  • key – 변경된 데이터의 키(.clear()를 호출했다면 null)
  • oldValue – 이전 값(키가 새롭게 추가되었다면 null)
  • newValue – 새로운 값(키가 삭제되었다면 null)
  • url – 갱신이 일어난 문서의 url
  • storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체
• 이 때 storage 이벤트는 이벤트를 발생시킨 스토리지를 제외하고, 스토리지에서 접근 가능한 window 객체 전부에서 일어남.

// 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
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에 무언가를 설정해 '응답'이 가능하도록 할 수 있음.

→ 이를 이용해 origin이 같은 창끼리 메시지를 교환하게 하는 것도 가능해짐!