Client Side에서 데이터 저장

Cookie

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

Cookie 추가하기

document.cookie = 'key=value'

이전 쿠키를 덮어쓰지 않고 새로 추가됨

크롬 개발자도구 - Application 탭 - Cookies에서 확인가능

Cookie 읽어오기

const cookies = document.cookie

각 쿠키는 ;로 구분되어있어 불러온 후 split 등으로 구분 후 사용.

Cookie 유효기간 넣기

1. expires 이용

//1. GMT 시간을 기준
document.cookie = 'key=value; expires=Wed, 18 Aug 2021 16:44: 43 GMT'

//GMT기준으로 현재시간 구하는 법
new Date().toGMTString 

2. max-age

//생성 시점 기준으로 유호기간 설정
// 단위는 1초
document.cookie = 'hello=cookie; max-age=300'

Cookie 주의사항

• HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키사이즈가 커지면 HTTP 요청 크기도 커진다.
• 사이즈 제한.
• 보안에 취약.

Local Storage

• key, value기반으로 Local에 데이터를 저장
• 도메인 기반으로 Storage가 생성
• 삭제하거나 Storge을 제거 하지 않는한 지워지지 않는다.

Local Storage 사용법

// 저장
window.localStorage.setitem('key', 'value')

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

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

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

// 객체데이터 저장시에는 JSON형식으로 변환
const user = {
  name: 'kim',
  bobby: 'cooking'
}

localStorage.setItem('user', JSON.stringify(user))

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

Session Storage

• 전체적으로 Local Storage와 유사
• 브라우저를 닫으면 저장내용 초기화