쿠키
- 쿠키는 브라우저에 저장되는 작은 문자열로 RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부다.
- 다른 저장 방법에 비해 가장 오래된 방식이다.
쿠키 추가하기
document.cookie = ‘language=javascript’
이렇게 language생성하면 이전 쿠키를 덮어쓰지 않고 새로 추가된다.
쿠키 읽어오기
const cookies = document.cookie
각 쿠키는 ;로 구분되어있어 볼러온 후 split함수 등을 통해 쪼개서 써야한다.
쿠키 유효기간 넣기
쿠키 같은 경우 유효기간을 넣지 않으면 브라우저를 닫을 때 쿠키가 삭제된다.
Date().toGMTString()을 통해 현재 TimeZone의 GMT 시간을 가져올 수 있다.
//쿠키 넣는 두가지 방식
//expires의 경우 GMT 기준으로 String을 넣어야한다
//2021년 8월 18일 11시 13분 36초까지 유효함
document.cookie = 'user=loopy; expires = Wed, 18 Aug 2021 02:13:36 GMT'
//두번째 방식
//max-age를 넣으면 생성시점 기준으로 유효기간 설정 가능
//단위는 1초. 3600 = 1시간
document.cookie = 'use=loopy; max-age=3600';쿠키 주의사항
- HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 크기도 커진다.
- 사이즈에 제한이 있다.
- 여러가지 보안 취약점을 조심해야한다. 쿠키에 인증정보를 넣으면 해킹에 위험성이 있다.
Local Storage
- key, value 기반으로 Local에 데이터를 저장할 수 있다.
- 도메인 기반으로 Storage가 생성된다.
- 도메인이 같다면, 여러탭 내에서 같은 Storage가 공유된다.
- 삭제하거나 Storage를 나라리지 않는 한 삭제되지 않는다.
- setItem을 할 때 로컬스토리지도 용량 제한이 있다. 캐싱을 날리는 코드를 안짜면 캐시가 너무 많이 쌓여 어느 순간부터는 에러가 날 수 있다.
로컬 스토리지 저장 방법 3가지
window.localStorage.name = 'loopy';
window.localStorage['name'] = 'roto';
window.localStorage.setItem('name', 'roto')- setItem을 이용해서 사용하는 것을 권장
- property를 수정하는 식으로 하면 length, toString 같은 내장 함수들을 덮어 씌울 수 있기 때문이다.
로컬 스토리지 불러오기, 삭제 방법
//window 생략 가능
localStorage.setItem('name', 'roto')
//불러오기
const storedName = localStorage.getItem('name')
//삭제하기
localStorage.removeItem('name')
//전체 삭제하기
localStorage.clear()⭐ 개발을 할 때 storage 를 다루는 기능을 별도의 함수로 분리해서 다루는게 좋다.
Session Storage
- 전체적으로 Local Storage와 같다.
- 브라우저를 닫으면 저장된 내용이 초기화 된다.
- 생성,불러오기,삭제 등은 local Storage와 유사하다.
