Web Storage

Web Storage란?

• HTML5에서 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage가 추가되었다.
• Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회할 수 있다.
• Web Storage에는 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage) 두 가지가 있는데 쿠키와의 다른 점은 서버로 전송하지 않는 다는 점과, 용량의 차이가 있다.
• 한 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이며 최대 쿠키 크기는 4KB이다. 하지만 Web Storage에는 브라우저마다 차이가 있지만 약 5Mb정도까지 가능하다.

세션 스토리지(sessionStorage)와 로컬 스토리지(locationStorage)의 차이점

• 세션 스토리지는 브라우저를 끄는 순간 데이터가 모두 지워지는 반면 로컬 스토리지는 사용자가 직접 지우기 전 까지는 절대로 지워지지 않는다는 차이점이 있다.

장단점

Cookie

• cookie 장점 : 웬만한 브라우저에는 지원이 다 된다.
• cookie 단점 : API가 한번 더 호출되므로 서버의 부담이 증가하고 쿠키자체의 용량이 적다.

LocalStorage

• LocalStorage 장점 : 서버에 불필요하게 데이터 저장하지 않는다. 용량이 크다.
• LocalStorage 단점 : HTML4만 지원되는 브라우져라면 지원이 되지 않는다.

SessionStorage

• SessionStorage의 장단점은 LocalStorage와 동일하다.

사용법

<cookie 사용 법>

예) A라는 항목에 1이라는 값을 유효기간 7일로 저장
setCookie("A","1",7)
예) A라는 항목에 저장된 쿠키값 불러오기
getCookie("A")

<Web Storage 사용 법>

예) A라는 항목에 1이라는 값을 저장
localStorage.A = "1"
sessionStorage.A = "1"
예) A라는 항목에 저장된 값 불러오기
localStorage.A
sessionStorage.A