크게 아래와 같이 3가지 방식이 있다.
하나씩 알아가보자.
쿠키 주의사항
- HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 크기도 커진다.
- 사이즈에 제한이 있다.
- 여러가지 보안 취약점을 조심해야 한다.
// 쿠키 추가하기
document.cookie = 'language=javascript' // 이전 cookie를 덮어쓰지 않고 새로 추가된다.
// 쿠키 읽어오기
const cookies = document.cookie.split(';')
각 쿠키는 세미콜론 ;
으로 구분되어있어 불러온후 split으로 쪼개서 사용해야한다.
쿠키는 유효기간을 명시하지 않으면 브라우저를 닫는 순간 날라가버린다.
// GMT String으로 명시하는 방법 //
// GMT String으로 표기해야한다.
// 2021sus 8월 18일 11시 13분 37초까지 유효
document.cookie = 'user=roto; expires=Wed, 18 Aug 2021 02:13:37 GMT';
// GMT시간 구하는 방법
new Date().toGMTString();
// Wed, 18 Aug 2021 02:13:37 GMT
// max-age로 명시하는 방법 //
// max-age를 넣으면 생성시점 기준으로 유효기간 설정 가능
// 단위는 1초, 3600의 경우 1시간
document.cookie = 'user=roto; max-age=3600';
로컬 스토리지에 값는 저장하는 방법은 크게 3가지이다.
// 키 접근1
window.localStorage.name = 'yoonho';
// 키 접근2
window.localStorage['name'] = 'yoonho';
// setItem 방식, 권장
window.localStorage.setItem['name', 'yoonho']
이 중 setItem
을 사용하는 것이 권장된다.
프로퍼티를 수정하는 식으로 하면 length
, toString
같은 내장 함수들을 덮어씌울수 있기 때문이다.
로컬스토리지 사용하기
// window 생략가능
// 저장
localStorage.setItem('name', 'yoonho');
// 불러오기
const storedName = localStorage.getItem('name');
// 삭제하기
localStorage.removeItem('name');
// 전체 삭제하기
localStorage.clear();
로컬스토리지에는 string만 넣을수 있기 때문에 JSON.stringfy
로 넣고 JSON.parse
로 꺼낸 값을 파싱해서 쓴다.
const user = {
name: 'yoonho',
position: 'developer',
age: 19
}
// 저장
localStorage.setItem('user', JSON.stringfy(user));
// 불러오기
const storedUser = JSON.parse(localStorage.getItem('user'));
세션스토리지 사용하기
// window 생략가능
// 저장
sessionStorage.setItem('name', 'yoonho');
// 불러오기
const storedName = sessionStorage.getItem('name');
// 삭제하기
sessionStorage.removeItem('name');
// 전체 삭제하기
sessionStorage.clear();
객체를 다룰땐 JSON으로 사용한다.
const user = {
name: 'yoonho',
position: 'developer',
age: 19
}
// 저장
sessionStorage.setItem('user', JSON.stringfy(user));
// 불러오기
const storedUser = JSON.parse(sessionStorage.getItem('user'));