웹스토리지 & 쿠키

웹스토리지

로컬스토리지와 세션스토리지로 나누어져 있으며 key와 value의 형태로 이루어져 있다. 웹스토리지는 클라이언트에 대한 정보를 저장하며 쿠키와의 차이점은 웹스토리지는 로컬에만 정보를 저장하며 쿠키는 서버와 로컬에 정보를 저장한다.

로컬 스토리지(Local Storage)

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. (ex : 자동 로그인 저장 > 내가 지우지 않는 이상 계속 유지) 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다.

세션 스토리지(Session Storage)

세션 종료 시 클라이언트에 대한 정보가 삭제 된다. (ex : 비로그인 장바구니 > 세션 종료시 정보 사라짐) 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

쿠키

쿠키는 만료기한이 있는 key/value 형태의 저장소이며, 대부분의 브라우저가 지원 한다. (ex : 팝업 창 > 일주일간 보지 않기를 눌렀을 때 cookie에 저장) 매 HTTP요청마다 포함되어 api호출로 서버에 부담이 되며 용량이 웹스토리지에 비해 작다. (약 4Kb) 암호화 존재하지 않아서 정보 도난 위험이 있다.

세팅하는 법

• 로컬 스토리지
  localStorage.setItem("A", 1)
  

• 세션 스토리지
  sessionStorage.setItem("A", 1)

• 쿠키
  setCookie("A", 1, 7) (Key == A, Value == 1, 유효기간 == 7초)

스토리지에서 값 가져오는 법

• 로컬 스토리지
  localStorage.getItem("A")
  

• 세션 스토리지
  sessionStorage.getItem("A")

• 쿠키
  getCookie("A") (Key == A)