localStorage와 sessionStorage
-
웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
-
이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있다.
-
"쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까?"라는 의문이 들 수 있다. 쿠키 이외의 다른 방식을 사용하는 이유는 다음과 같다.
1) 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
2) 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
3) 웹 스토리지 객체는 domain·protocol·port로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다. -
두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다.
setItem(key, value) – 키-값 쌍을 보관한다.
getItem(key) – 키에 해당하는 값을 받아온다다.
removeItem(key) – 키와 해당 값을 삭제한다.
clear() – 모든 것을 삭제한다.
key(index) – 인덱스(index)에 해당하는 키를 받아온다.
length – 저장된 항목의 개수를 얻는다.
localStorage
- origin이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
- 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
sessionStorage
- sessionStorage 객체는 localStorage에 비해 자주 사용되진 않는다. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문이다.
- sessionStorage는 현재 떠 있는 탭 내에서만 유지된다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문이다. 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다.
- 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.
