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

[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초)

 

 

출처: https://velog.io/@kler/TIL4-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%BF%A0%ED%82%A4-%EC%A0%95%EB%A6%AC