[JavaScript] Web APIs - Cookie

진성 뉴진스 팬인 나로서 쿠키는 정말 너무 반가운 단어다. 노래 참 좋은데... 식사랑 음료가 없으면 곤란하다.

 

쿠키(Cookie)

 

인터넷 사용자가 임의의 어떤 웹 사이트를 방문할 경우, 사용자의 웹 브라우저를 통해 로컬 (인터넷 사용자의 컴퓨터나 다른 기기)에 설치되는 작은 기록 정보 파일을 말한다. 쿠키는 세션 관리, 개인화, 트래킹 등에 사용되며 세션(session)은 쿠키를 이용한다. (찾아보면 아이콘이 실제로 쿠키모양이다.) 4KB 이상은 저장할 수 없다.

 

 

세션(Session)

 

웹 서버에 접속한 시점부터 웹 브라우저를 종료하여 연결을 끝내는 시점을 말한다. session-id를 할당해주는데, 이를 이용한 예시가 로그인을 하고 창을 이리 저리 이동해도 로그인이 풀리지 않는다. 그리고 메일을 쓸 수 있고 블로그 글도 쓸 수 있다.

// Cookie(쿠키)

// 도메인 단위로 저장
// 표준안 기준, 사이트당 최대 20개 및 4KB로 제한
// 영구 저장 불가능

// domain: 유효 도메인 설정
// path: 유효 경로 설정
// expires: 만료 날짜(UTC Date) 설정
// max-age: 만료 타이머(s) 설정

document.cookie = 'a=1; domain=localhost max-age=3'; // 3초 후 제거됨
// 1시간 후 제거 60 * 60
// 1일 후 제거 60 * 60 * 24
// 3일 후 제거 60 * 60 * 24 * 3
// 세션: 브라우저가 켜져있을 때는 쿠키가 존재하다가, 브라우저가 꺼지면 쿠키가 삭제됨

document.cookie = `b=2; expires=${new Date(2023, 11, 31).toUTCString()}`;
// 쿠키에서는 누적될 수 있음

console.log(document.cookie); // 개발자 도구 -> 애플리케이션 -> 저장용량 -> 쿠키에서 자세히 확인 가능

 

웹 스토리지(Web Storage)

 

쿠키와 유사한 기록 정보 파일인데, 쿠키보다 더 큰 용량 (5MB)으로 사용자 장치에 영구 데이터를 저장할 수 있다.

 

웹 스토리지의 종류는 세션 스토리지(session storage)와 로컬 스토리지(local storage) 두 가지가 있다.

 

세션 스토리지는 브라우저 세션이 유지되는 동안에만 데이터를 저장하고, 로컬 스토리지는 따로 제거하지 않는 한 영구적으로 데이터를 저장한다.

// Storage(스토리지)

// 도메인 단위로 저장
// 5MB 제한
// 세션 혹은 영구 저장 가능
// 만료 개념 X
// 제거 되어야 한다면 쿠키 사용

// sessionStorage: 브라우저 세션이 유지되는 동안에만 데이터 저장
// localStorage: 따로 제거하지 않으면 영구적으로 데이터 저장

// getItem(): 데이터 조회
// setItem(): 데이터 추가
// removeItem(): 데이터 제거
// clear(): 스토리지 초기화

// 모든 데이터가 문자 데이터 형태로 저장된다

localStorage.setItem('a', 'Hello World!');
localStorage.setItem('b', { x: 1, y:2 });
// 문자형태로 저장됨 -> 객체형태로 저장하고 싶으면 stringify() 사용 -> JSON 문자로 저장
// localStorage.setItem('b', JSON.stringify({ x: 1, y:2 }));
localStorage.setItem('c', 123);
// localStorage.setItem('c', JSON.stringify(123));

console.log(localStorage.getItem('a')); // Hello World!
console.log(localStorage.getItem('b')); // [object Object]
// console.log(JSON.parse(localStorage.getItem('b'))); // { "x":1,"y":2 }
console.log(localStorage.getItem('c')); // 123 (문자)
// console.log(JSON.parse(localStorage.getItem('c'))); // 123

localStorage.removeItem('a');
localStorage.clear();