[Javascript] Cookie, Sessionstorage, Localstorage 내용 정리 및 사용법

 

1. Cookie, Sessionstorage, Localstorage 정리

 

	Cookie	Web Storage
		Sessionstorage	Localstorage
특징	• 최대 4kb • 만료기한 있음 • Key, Value 형태 • 서버와 로컬에 정보 저장 • 클라이언트에 300개까지 저장 가능 • 하나의 도메인 당 20개의 값만 가능	• 각 클라이언트 고유 ID 부여 • 로컬에만 정보 저장 • 클라이언트에 대한 정보 저장 • 최대 5mb(브라우저마다 차이있음) • Key, Value 형태
		• 세션 종료시 정보 삭제 = 데이터 영구적X	• 데이터 영구적O
동작	1. 클라이언트 → 페이지 요청 2. 서버에서 쿠키 생성 3. http 헤더에 쿠키를 넣어 응답 4. 쿠키가 만료되지 않았다면 브라우저 종료 후에도 클라이언트에서 보관 5. 같은 요청 시 http 헤더에 쿠키를 함께 보냄 6. 서버에서 쿠키를 읽어 이전 상태와 다를 경우 내용을 업데이트하여 http 헤더에 포함해 응답	1. 클라이언트 → 서버 접속 → 세션 ID 발급 2. 클라이언트는 쿠키로 세션 ID가지고 있음 3. 클라이언트 → 쿠키 세션 ID 사용하여 서버에 요청 4. 서버 → 세션 ID로 정보 가져옴 → 클라이언트에 응답
장점	• 대부분의 브라우저 지원	• 용량 큼 • 보안 우수 (쿠키 < 웹스토리지) • 불필요한 데이터 저장X
단점	• 낮은 용량 • 매 http 요청마다 api호출 → 서버 부담 • 암호화X → 정보 도난 위험	• 사용자↑ = 서버 메모리 낭비 • html5를 지원하지 않는 브라우저에서 사용 불가
사용 예	• 오늘 더 이상 이 창을 보지 않음	• 일회성 로그인 • 비로그인 장바구니 • 입력 폼 정보 • 스크롤 위치 값	• 자동 로그인(사용자가 지우지 않는 한) • 다크/라이트 모드
사용시 주의	X	중요 정보 저장X (비밀번호 등) String type의 데이터만 지원함

 

 

2. Cookie 사용법

 

1) 생성하기

document.cookie = "key = value";

// expires key에 UTC time 값을 넣어 만료기간 설정
document.cookie = "key = value; expires = Thu, 18 Dec 2013 12:00:00 UTC";

// parametor를 통해 어느 path에 쿠키를 넣을 것인지 설정할 수도 있다.
document.cookie = "key = value; path = /";

 

2) 읽기

// javascript
var a = document.cookie;

 

3) 내용 변경하기

같은 key에 다른 value가 들어갈 경우 내용이 변경된다.

document.cookie = "key = value2; expires = Thu, 18 Dec 2013 12:00:00 UTC; path = /";

 

4) 삭제하기

만료기간(expires)값을 과거로 바꾸어 없앤다.

document.cookie = "key = ; expires = Thu, 01 Jan 1970 00:00:00 UTC; path = /;";

 

 

 

3. sessionStorage& localStorage 사용법

 

1) 기본 사용법

setItem()	값 추가하기
getItem()	값 가져오기
removeItem()	값 삭제하기
clear()	도메인 내의 localStorage 값 전체 삭제하기
length	전체 item 개수
key()	index로 key값 찾기

 

2) 값 생성하기

// sessionStorage
window.sessionStorage.setItem(key, value);

// localStorage
window.localStorage.setItem(key, value);

 

3) 값 가져오기

// sessionStorage
window.sessionStorage.getItem(key);

// localStorage
window.localStorage.getItem(key);

 

4) 값 삭제하기

// sessionStorage
window.sessionStorage.removeItem(key);

// localStorage
window.localStorage.removeItem(key);

 

5) 도메인 내의 sessionStorage/localStorage 값 전체 삭제하기

// sessionStorage
window.sessionStorage.clear();

// localStorage
window.localStorage.clear();

 

6) 전체 아이템 개수

// sessionStorage
window.sessionStorage.length;

// localStorage
window.localStorage.length;

 

 

7) Index로 Item의 key값 찾기

// sessionStorage
window.sessionStorage.key(index);

// localStorage
window.localStorage.key(index);