브라우저에 데이터 저장하기 - Storage
웹 스토리지 객체
브라우저 내에 키-값 쌍을 저장할 수 있는 방법
localStorage
- 브라우저, OS를 다시 실행해도 데이터가 계속 남아있다.
- 오리진(도메인/포트/프로토콜)이 같은 경우 모든 탭과 창에서 데이터 공유한다.
sessionStorage
- 로컬스토리지 보다는 제한적이다.
-
현재 떠 있는 탭 내에서만 데이터가 유지된다.
- 같은 페이지라도 탭이 다르면 다른 곳에 저장된다.
- 탭을 닫고 새로 열 때만 데이터가 사라진다. 새로고침해도 데이터는 유지된다.
쿠키를 사용하면 브라우저에 데이터 저장할 수 있는데 왜 또 다른 객체를 사용해야 하나요?
- 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청시 서버로 전송되지 않는다.
- 따라서 쿠키보다 더 많은 자료 보관할 수 있다.
- 쿠키와 다르게 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다.
- 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
- 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있기 때문에 프로토콜과 서브 도메인이 다르면 데이터에 접근 불가하다.
두 스토리지 객체의 메서드
- setItem(key, value)
- getItem(key)
- removeItem(key)
- clear()