로컬스토리지, 세션스토리지, 쿠키 정리

kler_HJ·2020년 3월 29일
26

JS

목록 보기
3/8
post-custom-banner

[1] 로컬스토리지, 세션스토리지, 쿠키 차이점

1. 쿠키의 단점을 보완해 HTML5에서 '웹스토리지'라는 기술 탄생.

1-1) 웹스토리지 : 로컬스토리지, 세션스토리지.

1-2) 웹스토리지는 Key와 Value 형태로 이루어짐.

1-3) 웹스토리지는 클라이언트에 대한 정보를 저장.

1-4) 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장.

2. 로컬스토리지는 클라이언트에 대한 정보를 영구적으로 저장

ex) 자동 로그인 저장

3. 세션스토리지는 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제

ex) 입력 폼 정보 저장

3-1) 로컬&세션스토리지 장점1 : 서버에 불필요하게 데이터를 저장하지 않는다.

3-2) 로컬&세션스토리지 장점2 : 용량이 크다. (약 5Mb, 브라우저마다 차이 존재)

3-3) 로컬&세션스토리지 단점 : HTML5를 지원하지 않는 브라우저의 경우 사용 불가

4. 쿠키는 만료 기한이 있는 Key, Value 형태의 저장소

4-1) 쿠키 장점 : 대부분의 브라우저가 지원

4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.

4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)

4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험

[2] 각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?

  • 자동 로그인 -> 로컬스토리지

  • 입력 폼 정보 -> 세션스토리지

  • 비로그인 장바구니 -> 세션스토리지

  • 다시 보지 않음 팝업 창 -> 쿠키

자바스크립트 객체 예시

let object = {

"A" : 1,

"B" : 2,

"name" : "wecode",

"Key" : "Value"

}

[3] 값 가져오는 법

1. 로컬 스토리지

  • localStorage.A (Key == A)

  • localStorage.getItem("A")

2. 세션 스토리지

  • sessionStorage.A (Key == A)

  • sessionStorage.getItem("A")

3. 쿠키

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

[4] 세팅하는 법

1. 로컬 스토리지

  • localStorage.A = 1 (Key == A, Value = 1)

  • localStorage.setItem("A", 1)

2. 세션 스토리지

  • sessionStorage.A = 1 (Key == A, Value = 1)

  • sessionStorage.setItem("A", 1)

3. 쿠키

  • setCookie("A", 1, 7) (Key == A, Value == 1, 유효기간 == 7초)
profile
더 나은 제품과 디자인에 대해 고민하기를 즐기는 Front-end 개발자입니다.
post-custom-banner

2개의 댓글

comment-user-thumbnail
2022년 3월 10일

너무 깔끔하게 잘 정리해주셔서 감사합니다..

답글 달기
comment-user-thumbnail
2022년 5월 29일

정리 감사합니다. 도움 많이 됐어요

답글 달기