클라이언트에서 데이터를 저장하는 방법 중 하나로 localStorage와 sessionStorage가 있다.
두 객체는 브라우저 내에 데이터(키-값)을 저장할 수 있게 해준다.
쿠키와 가장 큰 차이점은 서버가 아닌 브라우저내에만 저장된다는 것이다.
localStorage
localStorage는 브라우저에 값을 저장할수 있도록 도와주는 객체이다. localStorage에 저장한 데이터는 서버로 전송되지 않는다. 모든 일은 자바스크립트내에서 수행된다.
특징
localStorage의 특징은 다음과 같다.
1. 쿠키와 다르게 서버로 전송되지 않는다.
2. getItem, setItem,removeItem등의 메서드로 접근이 가능하다.
3. 오리진 , 도메인이 같을 경우 데이터는 모든탭과 창에서 공유된다.
4. iterable객체가 아니므로 순회가 불가능하다.
5.값과 데이터로 문자열만 사용이 가능하다. 형변환이 자동으로 일어난다.
sessionStorage
sessionStorage 또한 localStorage처럼 자바스크립트 내에서 데이터를 저장하기위한 객체이다. localStorage와 제공하는 메서드와 속성들도 동일하다.
다만, sessionStorage는 몇가지 제약사항이 존재한다.
sessionStorage의 제약사항
- storage는 현재 떠있는 탭에서만 유효하다. 즉, 같은 도메인, 같은 페이지여도 다른 탭에 떠있다면 정보공유가 불가능하다.
- 페이지가 종료되면 데이터는 사라진다. (새로고침시에는 유지된다.)
이러한 제약사항들때문에 sessionStorage는 잘 사용되지 않는다고 한다.
storage 이벤트
sessionStorage나 localStorage에 데이터 변화가 발생할때 해당 스토리지를 공유하는 모든 페이지에서 storage이벤트가 실행된다.
즉 탭 두개에 A라는 사이트를 띄어두었을때, 하나의 탭에서 Storage가 갱신되면 다른 탭에 Storage이벤트가 발생하면서 변경사항이 공유된다.
이러한 기능을 이용해 오리진이 같은 창끼리 메시지를 교환할 수 있다.
ref: javascript info localStorage와 sessionStorage
