JS : Local Storage, Session Storage, Cookie 정리

• Local Storage

※ 특징
- 사용자가 따로 삭제를 해주지 않는 이상 데이터를 영구적으로 저장할 수 있다.
- 도메인 별로 지속된다.

※ 사용 방법

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 조회
const storedValue = localStorage.getItem('key');

// 데이터 삭제
localStorage.removeItem('key');

 

• Session Storage

※ 특징
- 세션이 종료(브라우저 창 닫기)될 때까지 데이터가 지속된다.

※ 사용 방법

// 데이터 저장
sessionStorage.setItem('key', 'value');

// 데이터 조회
const storedValue = sessionStorage.getItem('key');

// 데이터 삭제
sessionStorage.removeItem('key');

 

• Cookie

※ 특징
- 서버로 요청을 보낼 때 자동으로 전송되는 작은 데이터 파일이다.
- 만료 시간을 지정해줄 수 있으면 해당 시간동안 지속된다.

※ 사용 방법

// 쿠키 저장
document.cookie = "key=value; expires=만료일; path=경로";

// 쿠키 조회
const cookies = document.cookie;

// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";