📀 Cookie , Storage

Cookie(쿠키)

• 도메인 단위로 저장
• 표준안 기준, 사이트당 최대20개 및 4KB로 제한
• 영구 저장 불가능
  domain : 유효 도메인 설정 (도메인이 맞지 않으면 쿠키가 생성되지 않는다.)
  path : 유효 경로 설정
  expires : 만료 날짜(UTC Date) 설정
  max-age : 만료 타이머(s) 설정
• 브라우저가 종료되면 쿠키의 정보도 종료된다.

document.cookie = 'a=1; domain=localhost; path=/abc'
document.cookie = 'b=2; max-age=3' //3초
document.cookie = `c=3; max-age=${60 * 60 *24}`
document.cookie = `c=4; expires=${new Date(2022,0,16).toUTCString()}` //22년1월 16일까지 기한 지정
document.cookie = 'b=6;' //덮어쓰는것도 가능하다.

console.log(document.cookie);

function getCookie(name){
	const cookie = document.cookie
    .split('; ')
    .find(cookie => cookie.split('=')[0] === name)
    return cookie ? cookie.split('=')[1] : null
}

console.log(getCookie('b'));

Storage

기본적으로 문자 데이터로 저장된다

• 도메인 단위로 저장된다.
• 5MB 로 제한
• 세션 혹은 영구 저장 가능

---

sessionStorage : 브라우저 세션이 유지되는 동안에만 데이터 저장
localStorage : 따로 제거하지 않으면 영구적으로 데이터 저장

---

.getItem() : 데이터 조회
.setItem() : 데이터 추가
.removeItem() : 데이터 제거
.clear() : 스토리지 초기화

---

localStorage.setItem(이름,데이터)
localStorage.setItem('a',JSON.stringify('Hello world!')) //JSON 은 작은 따움표를 허용하지 않고 큰 따움표만 허용한다.
//localStorage.setItem('b','{x:1,y:2}') //그래서 객체 데이터같은 경우는 제대로 데이터가 저장되지 않는다.
localStorage.setItem('b',JSON.stringify({x:1,y:2}))
localStorage.setItem('c',JSON.stringify(123))

console.log(JSON.parse(localStorage.getItem('a')))
//console.log(localStorage.getItem('b')) //{"x":1,"y":2} json문자로 저장된것을 확인할수 있다.
console.log(JSON.parse(localStorage.getItem('b')))
console.log(localStorage.getItem('c')) //문자데이터 123 이 출력된다.
console.log(JSON.parse(localStorage.getItem('c')))//숫자데이터 123 이 출력된다.

localStorage.removeItem('a');
localStorage.clear();
sessionStorage.removeItem('a');

스토리지에 데이터를 저장하거나 가지고 올때는 항상 JSON의 stringify() 메서드나 parse() 메서드를 같이 사용하는것을 권장한다.

• 쿠키는 사이트 배너하단에 하루동안 열지 않기 같은 특정 버튼을 만들때 사용한다.
• 스토리지는 데이터를 저장하고 불러오고 삭제하는것이 쿠키보다 훨신 더 편하고 용량도 많기 때문에 그렇게 만료되는 데이터가 아닌 그외 일반적인 데이터를 브라우저에 저장하는 용도로 사용하기 좋습니다.