쿠키, 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage)

쿠키, 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage)

Web Storage란?

HTML5에서 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage가 추가되었다.

Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회할 수 있다.

Web Storage에는 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage) 두 가지가 있는데 쿠키와의 다른 점은

서버로 전송하지 않는 다는 점과, 용량의 차이가 있다. 한 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이며 최대 쿠키 크기는 4KB이다. 하지만 Web Storage에는 브라우저마다 차이가 있지만 약 5Mb정도까지 가능하다.

---

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

세션 스토리지는 브라우저를 끄는 순간 데이터가 모두 지워지는 반면

로컬 스토리지는 사용자가 직접 지우기 전 까지는 절대로 지워지지 않는다는 차이점이 있다.

장단점

cookie 장점 : 웬만한 브라우저에는 지원이 다 된다.

cookie 단점 : API가 한번 더 호출되므로 서버의 부담이 증가하고 쿠키자체의 용량이 적다.

LocalStorage 장점 : 서버에 불필요하게 데이터 저장하지 않는다. 용량이 크다.

LocalStorage 단점 : HTML4만 지원되는 브라우져라면 지원이 되지 않는다.

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

---

참고 사이트

- https://nubiz.tistory.com/540

- https://justmakeyourself.tistory.com/entry/web-localstorage

- https://kcizzang.tistory.com/m/entry/SessionStorage-와-LocalStorage-차이점

- https://untitledtblog.tistory.com/47

- https://hellomhc.tistory.com/m/38

- https://webisfree.com/2015-12-28/localstorage-vs-cookie-장단점

- https://webisfree.com/2016-06-24/[자바스크립트]-localstorage-sessionstorage-클라이언트에-정보-저장

- https://zetawiki.com/wiki/HTML5_로컬_스토리지

- https://justmakeyourself.tistory.com/entry/web-localstorage

- https://useful-coding-dictionary.tistory.com/m/entry/HTML-5-저장소세션스토리지로컬스토리지-및-쿠키

- https://itfresh.tistory.com/21

- https://kadamon.tistory.com/8

- https://isme2n.github.io/devlog/2017/06/21/storage-cookie/

- https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048