쿠키와 스토리지

Cookie

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

Cookie 사용법

document.cookie = 'language=javascript` // 이전 cookie를 덮어쓰지 않고 새로 추가됨

const cookies = document.cookie;
const cookies = document.cookie.split(';');

각 쿠키는 ;로 구분되어있어 불러온 후 split 등으로 쪼개서 써야 한다.

유효기간을 넣지 않으면 브라우저를 끄는 순간 날아가 버린다.

유효 기간을 넣기 (ex: 오늘 하루 보지 않기, 14일 동안 보지 않기)
GMT 방식으로 넣는 방법과 max-age를 넣는 방법이 있다.

// expries의 경우 GMT String을 넣어야 함.
// GMT 기준이기 때문에 이 쿠키는 한국 시간 기준으로 2021년 8월 18일 11시 13분 37초까지 유효 (+9시간)
document.cookie = 'user=kyj; expires=wed, 18 Aug 2021 02:13:37 GMT

// 유효기간을 하루로 설정하는 법
const date = new Date();
date.setDate(date.getDate() + 1) // date를 내일로 설정
document.cookie = `user=kyj; expires=${date.toGMTString()}`


// max-age로 설정하는 법
document.cookie = `user=kyj; max-age=60` // 1분 뒤에 삭제

Cookie 주의사항

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

Local Storage

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

값을 저장하는 방법은 세 가지가 있다.

window.localStorage.name = 'roto'
window.localStorage['name'] = 'roto'
window.localStorage.setItem('name', 'roto')

setItem을 이용해서 사용하는 것을 권장한다.
property를 수정하는 식으로 하면 length, toString 같은 내장 함수들을 덮어 씌울 수 있기 때문이다.

Local Storage 사용법

// window 생략 가능
localStorage.setItem('name','roto') // key, value 형식으로 입력, string만 넣을 수 있음

const storedName = localStorage.getItem('name') // 불러오기

localStorage.removeItem('name') // 삭제하기

localStorage.clear() // 전체 삭제하기

localStorage에 string만 넣을 수 있다는 것을 명심해야 한다.
json 데이터를 저장하고 불러오는 코드를 살펴보자.

const user = {
  name: "roto",
  position: "bassist",
  songs: ["always", "we can speak"],
};

localStorage.setItem("user", JSON.stringify(user));

const storedName = JSON.parse(localStorage.getItem("name"));

Session Storage

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

Session Storage 사용법

// window 생략 가능
sessionStorage.setItem('name','roto') // key, value 형식으로 입력, string만 넣을 수 있음

const storedName = sessionStorage.getItem('name') // 불러오기

sessionStorage.removeItem('name') // 삭제하기

sessionStorage.clear() // 전체 삭제하기

사용 시 주의사항

스토리지를 다룰 때 src/storage.js를 만들고, 해당 파일에서만 스토리지에 접근하도록 만드는 게 좋다.

용량 제한에 해당할 때, 임의로 값을 바꿀 때 대처할 수 있을 때, Json 값이 아닐 때 등의 문제가 발생할 수 있으므로 try catch 문을 통해 대처하는 것이 좋다.

const storage = (function (storage) {
  const getItem = (key, defaultValue) => {
    try {
      const storedValue = storage.getItem(key);
      if (storedValue) {
        return JSON.parse(storedValue);
      }
      return defaultValue;
    } catch (e) {
      console.log(e);
      return defaultValue;
    }
  };

  const setItem = (key, value) => {
    try {
      storage.setItem(key, value);
    } catch (e) {
      console.log(e);
    }
  };

  return {
    setItem,
    getItem,
  };
})(window.localStorage); // 전역 오염 방지