localStorage와 sessionStorage

• 웹 스토리지 객체 localStorage/sessionStorage 사용 시 브라우저에 키-값 저장.

• 쿠키와의 차이

  • 네트워크 요청 시 서버로 전송되지 않아서 더 많은 자료 보관 가능

  • 개발자가 브러우저 내 웹 스토리지 구성 방식 설정 가능

  • 서버가 HTTP 헤더를 통해 스토리지 객체 조작할 수 없고 모두 JS 내에서 수행됨

  • 도메인,프로토콜,포트로 종의되는 오리진(origin)에 묶여있음. 따라서 프로토콜, 서브 도메인이 다르면 데이터에 접근 가능

• 원칙

  • 키, 값은 반드시 문자열이여야 함(다른 형태일 시 자동 변환)

  • 제한 용량은 5MB 이상이며 브라우저마다 다름

  • 파기되지 않음

  • 오리진(도메인, 포트, 프로토콜) 에 묶여있음

• localStorage 는 오리진이 같은 탭, 창 전체에 공유되며 브라우저 껐다 켜도 남아있음

• sessionStorage 는 오리진이 같은 브라우저탭, iframe 에 공유되며 페이지 새로 고침해도 남아 있지만 탭이나 브라우저 종료 시 사라짐

• localStorage, sessionStorage 둘 다 같은 메서드 공유(제공)하고 있으며 갱신은 일반 객체처럼 가능하지만 반드시 메서드 사용해야 함 (메서드 사용하지 않을 시 storage 이벤트 일어나지 않으며, 내장 메서드를 키로 설정할 시 에러 발생)

• 이터러블 객체는 아니지만 배열처럼 다루면 키-값 얻기 가능

• storage 이벤트

  • storage 메서드로 객체 갱신 시 발생하며 여러 프로퍼티 제공

  • 객체 연산(key/oldValue/newValue)과 관련된 데이터 전체와 문서 url, 스토리지 객체 storageArea 가지고 있음

  • 이벤트가 생성된 곳 제외하고 스토리지에 접근하는 모든 window 객체에서 일어남 (sessionStorage는 탭 내에서, localStorage는 전역에서)

  • 모던 브라우저는 오리진이 같은 창끼리 통신할 수 있도록 하는 브로드캐스트 API 지원