웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.

• 키와 값은 항상 문자열이어야 합니다.

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.

• 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.

• 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진(Origin)에 묶여있습니다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.

  

localStorage

• 오리진(Origin)이 같은 탭 전체, 창 전체에서 공유됩니다.
• 브라우저를 껐다 켜도 storage 가 남아 있습니다.

sessionStorage

• 오리진(Origin)이 같은 현재 떠 있는 브라우저 탭, iframe에서 공유됩니다.
• 페이지를 새로 고침 해도 남아있습니다. 하지만 탭이나 브라우저를 종료하면 사라집니다.

<aside> 📌

하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됩니다.

</aside>

API

• setItem(key, value)

  키-값 쌍을 보관합니다.

• getItem(key)

  키에 해당하는 값을 받아옵니다.

• removeItem(key)

  키와 해당 값을 삭제합니다.