저장소

localStorage, sessionStorage, Cookie는 백엔드가 아닌 브라우저에 데이터를 저장하는 저장소입니다.

각 저장소는 사용 목적에 따라 차이가 있습니다.

localStorage & sessionStorage

차이점 localStorage - 브라우저를 껐다 켜도 남아 있음 sessionStorage - 브라우저(탭)를 닫으면 사라짐 (새로고침은 유지)

사용법

localStorage와 sessionStorage의 사용법은 같습니다.

저장하기 localStorage.setItem('저장할 키' , '저장할 값') sessionStorage.setItem('저장할 키' , '저장할 값')

값 꺼내기 localStorage.getItem('가져올 값의 키') sessionStorage.getItem('가져올 값의 키')

주의할 점

const profile01 = {
	name : "철수"
}
const profile02 = {
	name : "철수"
}
localStorage.setItem('profile01' , profile01)
// [object Object]
localStorage.setItem('profile02',JSON.stringify(profile02))
// `{name: '철수'}`

console.log(localStorage.getItem('profile01'))
// [object Object]
console.log(JSON.parse(localStorage.getItem('profile02')))
// {name: '철수'}

저장소에는 문자열만 저장되기 때문에 객체를 그대로 넣으면 꺼낼 때 원래 객체로 쓸 수 없습니다. 저장할 때 JSON.stringify로 문자열로 바꾸고, 꺼낼 때 JSON.parse로 다시 객체로 변환해야 합니다.

Cookie

Cookie는 name(키)과 value, expires·Max-Age, Secure 같은 여러 속성을 함께 저장합니다.

쿠키는 요청할 때 자동으로 백엔드에 함께 전송될 수 있고, 반대로 백엔드가 응답으로 쿠키를 설정할 수도 있습니다. 백엔드가 설정한 쿠키는 프론트엔드에서 따로 저장하지 않아도 브라우저에 자동으로 등록됩니다.