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

💾 Web Storage란??

서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 해주는 HTML5의 새로운 기능이다.

😋 Web Storage의 장점

• 쿠키가 4kb 까지 밖에 저장 공간을 이용하지 못하지만, 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.

🔎 로컬 스토리지 (local storage)란?

• 브라우저에 반영구적으로 데이터를 저장하고, 브라우저를 종료해도 데이터가 유지된다.
• 하지만 도메인? 이 다른 경우 로컬 스토리지에 접근 할 수 없다.
  예시) www.google.com에서 저장한 데이터를 www.naver.com에서 접근 할 수 없다.
• 영속성(persistence)이 있다고한다.
• 자바스크립트로 로컬 스토리지에 접근하기 예시코드

let data1= localStorage.setItem('item1',10);
let data2= localStorage.setItem('item2', 'new item');

console.log(data1)
console.log(data2)

//10
//new item

🔎 세션 스토리지 (Session storage)란?

• 각 세션마다 데이터가 개별적으로 저장된다.
  예시) 브라우저 창을 여러개 키면 각각의 브라우저 탭마다 개별적으로 데이터가 저장된다.
• 로컬 스토리지와 다르게 세션이 저장되있는 브라우저 창을 닫으면 자동제거 된다.
• 같은 도메인이라도 세션이 다르면 데이터에 접근 할 수 없다.
• 새션 스토리지에 있는 데이터의 접근 방식은 로컬과 똑같다.

🍪 Cookie란??

HTTP의 특성

HTTP는 클라이언트와 통신이 끝나면 상태정보를 저장하지 않는 무상태성(stateless), 요청(request), 응답(response)가 끝나면 접속을 종료하는 비연결성(connectionless)의 특성이 있다.

쿠키의 용도

• HTML5가 나오기전 웹 사이트를 방문하는 유저들의 정보를 저장하는 주된 방법
• 사용자의 브라우저에 저장되고 키(key) - 값(value) 저장소이고 문자열만 저장 할 수 있다.

세션 쿠키 (session cookies)

• 쿠키에 만료일이 포함되지 않으면 세션 쿠기라고한다.
• 세션 쿠키는 디스크에 저장되지않고 메모리저장된다.

지속적 쿠키(persistent cookies)

• 쿠키에 만료일이 포함되면 지속적 쿠기라고한다.
• 세션 쿠키는 디스크에 저장되고 수동으로 삭제하기 전까진 만료 기한까지 데이터가 저장된다.