1. Cookie

• 쿠키는 브라우저에 저장되는 작은 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부
• 다른 저장 방법에 비해 가장 오래된 방식

추가

유효기간을 넣어야 브라우저를 닫아도 날라가지 않음

document.cookie = 'language=javascript; expires=Wed, 18 Aug 2021 02:13:37 GMT';

유효기간 넣기

1. GMT(Greenwich Mean Time)

const date = new Date();
date.setDate(date.getDate() + 1);
document.cookie = `user_name=jonghyeon; expires=${date.toGMTString()}`;

2. max-age

생성시점 기준으로 유효기간 설정 가능 (단위는 1초. 3600의 경우 1시간)

document.cookie = 'user=jonghyeon; max-age=3600';

읽기

const cookies = document.cookie;
// 각 쿠키는 ;로 구분되어 있어 불러온 후 split 등으로 쪼개서 써야 합니다.
cookies.split(';');

주의사항

• HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 크기도 커집니다.
• 사이즈에 제한이 있습니다.
• 여러가지 보안 취약점을 조심해야합니다.
  
  
  

2. Local Storage

• key, value 기반으로 Local에 데이터를 저장할 수 있습니다.
• 도메인 기반으로 Storage가 생성이 됩니다.
• 도메인만 같다면, 여러탭 내에서 같은 Storage가 공유됩니다.
• 삭제하거나 Storage를 날리지 않는 한 삭제되지 않습니다.

추가

값을 저장하는 방법은 크게 세 가지가 있습니다.

// window 생략 가능
window.localStorage.name = 'jonghyeon';
window.localStorage['name'] = 'jonghyeon';
window.localStorage.setItem('name', 'jonghyeon'); // *** 이 방법이 권장됩니다.

setItem이 권장 되는 이유

property를 수정하는 식으로 하면 객체 내부의 length, toString 같은 내장 함수들을 덮어 씌울 수 있기 때문입니다.

읽기

const storedName = localStorage.getItem('name');

삭제

localStorage.removeItem('name');
// d. 전체 삭제하기
localStorage.clear();

JSON.stringify, JSON.parse

localStorage에는 string만 넣을 수 있기 때문에, JSON.stringify로 넣고 JSON.parse로 꺼낸 값을 파싱해서 쓰는 것이 좋습니다.

const user = {
  name: 'jonghyeon',
  position: 'drummer',
  songs: ['say that you', 'we wanna party'],
};
// 저장
localStorage.setItem('user', JSON.stringify(user));
// 불러오기
const storedName = JSON.parse(localStorage.getItem('name'));

3. Session Storage

• 전체적으로 Local Storage와 같다.
• 브라우저를 닫으면 저장된 내용이 초기화 된다.