[JavaScript] LocalStorage와 SessionStorage

Local Storage와 Session Storage

🏰 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장

 

• 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아 있음

쿠키 대신 다른 객체를 사용해 데이터를 저장하는 이유?

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

두 스토리지 객체가 제공하는 메서드와 프로퍼티

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

Local Storage

• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유
• 브라우저나 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의 내장 메서드를 키로 설정할 수 있음
  • let key = 'length'; localStorage[key] = 5; // TypeError: Cannot assign to read only property 'length'...
  • 데이터를 수정하면 storage 이벤트가 발생하는데, 이 이벤트는 localStorage를 객체처럼 접근할 땐 일어나지 않음

키 순회하기

• 스토리지 객체는 iterable 객체가 아님
• 대신 배열처럼 다루면 전체 키-값을 얻을 수 있음

문자열만 사용

• localStorage의 키와 값은 반드시 문자열
• 숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환
• JSON을 사용하면 객체를 쓸 수 있긴함
• 디버깅 등의 목적으로 스토리지 객체 전체를 문자열로 변환하는 것도 가능

Session Storage

sessionStorage 객체는 localStorage에 비해 자주 사용되진 않음

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

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

Storage Event

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

Reference

localStorage와 sessionStorage