쿠키와 스토리지 (cookie & storage)

 

• 서버의 비연결성과 무상태라는 특성때문에 연결이 끊어지면 정보가 없어진다.

1. HTTP 쿠키

1.1 쿠키란

• 서버가 사용자의 웹 브라우저(클라이언트)에 전송하는 작은 데이터 조각으로 볼수 있다. 쿠키는 유저식별과 상태관리에 사용되고 있는 기능이다.
• 웹 사이트가 유저의 상태를 관리하기 위해 유저의 컴퓨터 상에 일시적으로 데이터를 저장해 두고, 다음에 그 유저가 동일한 웹사이트에 액세스 했을때 이전에 발행한 쿠키를 송신받을수 있다.
• 쿠키는 주로 3가지 목적으로 사용된다.
  1. 정보관리: 서버에 저장할 로그인, 장바구니, 게임 점수 등의 정보 관리
  2. 개인화: 사용자 선호, 테마 등의 세팅
  3. 트래킹: 사용자 행동을 기록 및 분석 (추천 아이템 또는 광고 등)
• 도메인 별로 따로 저장이 되고, 동일한 서버에 재 요청시에 저장된 데이터를 함께 전송한다. HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문이다.
• 쿠키는 보통 4kb의 매우 작은 용량을 차지하며, 문자열의 형태로 저장이 되고 제거시점은 사용자 설정이다.
• 쿠키를 호출할 때 쿠키의 유효 기한과 송신지의 도메인, 경로, 프로토콜 등을 체크하는 것이 가능하기 때문에, 적절하게 발행된 쿠키는 다른 웹 사이트와 공격자의 공격에 의해 데이터가 도난당하지 않는다.

1.2 쿠키 종류에 따른 만료 시점

1. persistence cookie : 만료시점을 명시하지 않으면 계속 유지되는 쿠키로, Expires 속성으로 만료시점을 정할 수 있다. 하드디스크에 저장된다. ( 유저 경험을 커스텀하기 위해 특정 웹사이트에서 행동을 기록하는 등의 여러 활동들에 사용된다)
2. session cookie : 만료일을 포함하지 않으며, 브라우저가 종료될 때(현재 세션이 종료될때) 삭제된다. 웹브라우저에 저장된다. (금융이나 은행 관련 웹사이트에서 사용된다.)

1.3 쿠키 만들기

• 쿠키는 서버와 브라우저 모두 생성할 수 있고, 스토리지는 오직 브라우저에서만 생성을 할 수 있다. 쿠키는 서버와 상호작용을 한다면 스토리지는 데이터를 저장하는데에만 사용된다.

// script
document.cookie = 'name=main; expires='new Date(2021,10,20).toUTC;

 

1.4 쿠키와 보안

• 보안된 쿠키는 HTTPS 프로토콜 상에서 암호화된 요청일 경우에만 전송된다.
• 그러나 보안된 쿠키일지라도 민감한 정보는 절대 쿠키에 저장하면 안된다. 쿠키를 전달하는 과정에서 정보를 채갈수 있기 때문이다. 이를 snipping 이라고 한다.

2. LocalStorage

2.1 LocalStorage 란..

• HTML5 가 나온 이후, 웹스토리지는 쿠키의 단점을 보완해서 만든 기술로, 기본적으로 key와 value 형태로 이루어져 있다. 쿠키와 마찬가지로 클라이언트에 대한 정보를 저장하는데, 쿠키와 달리 서버에 클라이언트의 데이터를 저장하지 않고, 로컬영역에만 저장을 한다. (로컬 디스크)
• Cookie와 달리 HTTP 요청으로 서버와 데이터를 주고받지 않기 때문에, 클라이언트와=[]\ 서버간의 전체 트래픽과 낭비를 줄일 수 있다.
• 원시값뿐만 아니라 객체타입으로도 저장할수 있기 때문에 최대 5Mb의 용량의 정보를 저장할 수 있다. cookie가 보유할 수 있는 데이터보다 훨씬 많은 양이다.

2.2 Storage의 종류

1. Local Storage : 클라이언트에 대한 정보를 강제적으로 지우지 않는이상 영구적으로 보관한다. 데이터를 저장하거나 삭제 등을 할 수 있는 다양한 메서드들이 존재한다.
2. 페이지별로 데이터가 저장된다.
3. Session Storage : 로컬스토리지와 다르게 세션이 종료되면(웹브라우저를 종료하면) 자동으로 클라이언트의 정보가 삭제된다. 보안이 많이 필요한 정보일수록 세션을 쓰는 것이 좋다.

2.3 storage item 활용

// 로컬 스토리지 item 설
정하기
localStorge.setItem('name', 'Tom');

// 로컬 스토리지 item 가져오기
const myName = localStorage.getItem('name');

// 로컬 스토리지 item 제거 - 항목 하나
lacalStorage.removeItem('name')

// 로컬 스토리지 item 제거 - 전체
localStorage.clear();

• Json stringify와 json parse를 이용하여 저장하고 가져올 수 있다. (웹 요청과 관련하여 정리하기)

class Model {
	id: number:
	name: string;
	
	construuctor(id: number, name: string) {
			this.id = id;
			this.name = name;
	}
}
const model = new Model(1, 'rainist');
localStorage.setItem('model', JSON.stringify(model));

 

 

3. cookie 와 storage의 관계

분류	Cookies	Local Storage	Session Storage
용량	4kb	10mb	5mb
가능 HTML	HTML4	HTML5	HTML5
접근성	모든 윈도우	모든 윈도우	같은 페이지탭
만료시점	수동	영구적	탭 종료시
저장 위치	브라우저와 서버	브라우저만	브라우저만
서버와의 통신	YES	NO	NO