Web Storage api
- HTML5에서 등장
- localStorage
- sessionStorage
- IE8+이상의 모든 브라우저에서 지원
localStorage
- 기존의 쿠키보다 훨씬 안전하다 / 개발자 도구의 application에서 수동으로 삭제 하거나 브라우저 캐시 삭제를 하지 않는 한, 인터넷 다시 켜도 남아있다
- 오리진(origin)이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.즉,다른 창에서 본 페이지를 열어봐도 같은 localStorage값을 가지고 있다.
- 브라우저나 OS가 재시작하거나 페이지 새로고침해도 데이터가 파기되지 않습니다(그대로 남아있다).
- 쿠키와 달리 만료 기한도 없다
sessionStorage
- sessionStorage 객체는 localStorage와 제공하는 프로퍼티와 메서드는 같지만,
훨씬 제한적이기 때문에 localStorage에 비해 자주 사용되진 않는다. - sessionStorage는 현재 떠 있는 탭 내에서만 유지되며, 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문
그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유 - 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않습니다. 하지만 탭을 닫고 새로 열 때는 사라진다.
localStorage/sessionStorage의 공통점과 차이점
공통점
- 같은 프로퍼티/메서드를 갖는다
두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.
setItem(key, value) – 키-값 쌍을 보관
getItem(key) – 키에 해당하는 값을 받아온다
removeItem(key) – 키와 해당 값을 삭제
clear() – 모든 것을 삭제
key(index) – 인덱스(index)에 해당하는 키를 받아옴
length – 저장된 항목의 개수를 얻어온다- 새로고침해도 저장한 데이터가 남아있는다
차이점
페이지 탭을 닫고 새로열때(브라우저 재시작)/OS재시작시 localStorage만 값을 유지, sessionStorage는 값이 사라져있다.
따라서 session Storage는 잘 사용하지 않는다
쿠키
쿠키는 사용자 컴퓨터의 브라우저에 저장되는 작은 텍스트 파일
(Cookies is a small text file of browser’s data which is store on the client’s computer)
쿠키는 주로 서버쪽에서 읽기 위한 데이터, 반면 localStorage데이터는 클라이언트 쪽에서만 읽을 수 있다
또한 sessionStorage를 브라우저를 닫을 때가 만료 기한인 쿠키로 볼 수 있다.
(You can assume sessionStorage as a Cookie that has expiry until the Browser is closed)
참고
https://ko.javascript.info/localstorage
https://stackoverflow.com/questions/3220660/local-storage-vs-cookies
superfly