브라우저에 데이터를 저장할 수 있지만, 새로고침 하게되면 데이터는 사라진다.
하지만 쿠키, 세션스토리지, 로컬스토리지를 사용하면 새로 고침해도 사라지지 않는다.
그렇다면 각각의 차이점이 무엇일까?

데이터를 브라우저에 영구 보관하기

Cookie

• 만료 시간이 있다.
• 저장된 데이터가 Backend-API 요청시 자동으로 전송된다.
• Backend에서 데이터를 쿠키에 넣어서 API 응답시 Frontend에 전달할 수도 있다.
• httpOnly : 브라우저에서 Javascript를 이용해 쿠키에 접근할 수 없으며 통신으로만 해당 데이터를 주고받을 수 있다.
• secure : https 통신시에만 해당 쿠키를 받아올 수 있으며 브라우저를 종료한 후 다시 들어와도 기록이 남아있다.

// 쿠키 저장
const onClickSaveCookie = () => {
	document.cookie = "aaa=포도"
}

// 쿠키 조회
const onClickGetCookie = () => {
	const mycookie = document.cookie
	console.log(mycookie)
}

Session Storage

• 데이터를 브라우저에 저장한다
• 브라우저를 종료할 때 데이터도 삭제된다.

// 세션 스토리지 저장
const onClickSaveSession = () => {
  sessionStorage.setItem("bbb", "사과");
};

// 세션 스토리지 조회
const onClickGetSession = () => {
  const ccc = sessionStorage.getItem("bbb");
  console.log(aaa);
};

Local Storage

localStorage는 window 브라우저에 데이터를 간단하게 저장할 수 있으며 브라우저를 종료해도 데이터가 날아가지 않는다.

데이터 저장하기
localStorage.setItem('key', data)

데이터 불러오기
localStorage.getItem('key')

로컬스토리지에서 해당 키 삭제하기
localStorage.removeItem('key')

데이터 삭제하기
localStorage.clear()

// 로컬 스토리지 저장
const onClickSaveLocal = () => {
  localStorage.setItem("ccc", "수박");
};
// 로컬 스토리지 조회
const onClickGetLocal = () => {
  const bbb = localStorage.getItem("ccc");
  console.log(bbb);
};