Web Storage는 Web API의 일종으로, 브라우저 내에 키-값 쌍을 저장 가능하게 하며, localStorage와 sessionStorage가 있다.

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

개념

메서드와 프로퍼티

localStorage와 sessionStroage는 동일한 메서드와 프로퍼티를 제공한다.

• setItem(key, value) : 키-값 쌍 보관
• getItem(key) : 키에 해당하는 값 호출
• removeItem(key) : 키와 해당 값 삭제
• clear() : 모두 삭제
• key(index) : 인덱스에 해당하는 키 반환 (인덱스를 통해 키에 접근 가능 ⇒ Map 객체와 다른 점)
• length : 저장된 항목의 개수 반환

키 순회

스토리지 객체는 iterable 객체가 아니므로, 배열처럼 다룸으로써 전체 키-값을 얻을 수 있다.

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

일반 객체를 다룰 때처럼 for key in localStorage 반복문을 사용해도 전체 키-값을 얻을 수 있다. 하지만 이 방법을 사용하면 필요하지 않은 내장 필드까지 출력된다.

SessionStorage

• 특징
  • 현재 떠 있는 탭 내에서만 유지된다. 따라서 세션 종료 시(브라우저가 닫히는 경우), 클라이언트에 대한 정보가 삭제된다.
  • 최대크기: 5MB
  • ex) 입력 폼 정보, 비로그인 장바구니

LocalStorage

• 특징
  • 오리진이 동일한 경우, 모든 탭과 창에서 데이터가 공유된다.
  • 브라우저나 OS의 재시작 시에도 데이터가 보존된다.
  • 유효기간 없이 데이터 저장이 가능하다. (영구적)
  • 자바스크립트 코드 작성, 브라우저 캐시 삭제, 로컬 저장 데이터 삭제를 통해 데이터를 지워야만 사라진다.
  • 저장공간이 session storage보다 크다.
  • ex) 자동 로그인
  • 키와 값은 반드시 문자열이어야 하며, 다른 자료형 사용 시 문자열로 자동 변환된다.

    JSON 활용하기

    JSON 메서드를 사용하여 키와 값을 객체 형태로 삽입하거나 복원할 수 있긴 하다.

    localStorage.user = JSON.stringify({name: "원일"});
    
    let user = JSON.parse( localStorage.user );
    alert( user.name ); // 원일

    alert( JSON.stringify(localStorage, null, 2) );

storage 이벤트

localStorage나 sessionStorage의 데이터가 갱신될 때, storage 이벤트가 실행된다. storage 이벤트는 다음의 프로퍼티를 지원한다.

• 프로퍼티
  • key: 변경된 데이터의 키 (.clear() 호출 시 null)
  • oldValue: 이전 값 (키가 새로 추가되었다면 null)
  • newValue: 새로운 값 (키가 삭제되었다면 null)
  • url: 갱신이 일어난 문서의 url
  • storageArea: 갱신이 일어난 localStorage 나 session Storage 객체

storage 이벤트는 이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 일어난다.

참고자료

Web Storage API - Web API | MDN

localStorage와 sessionStorage