클라이언트 사이드 데이터 저장하기

Client Side에서 데이터 저장하기

크게 아래와 같이 3가지 방식이 있다.

• cookie
• Local Storage
• Session Storage

하나씩 알아가보자.

1. Cookie

• 쿠키는 브라우저에 저장되는 작은 문자열로, RFC 6265명세에서 정의한 HTTP 프로토콜의 일부
• 다른 저장 방법에 비해 가장 오래된 방식

쿠키 주의사항

• 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';

2. Local Storage

• key, value 기반으로 Local에 데이터를 저장할 수 있다.
• 도메인 기반으로 Storage가 생성된다.
  • 도메인만 같다면, 여러탭 내에서 같은 Storage가 공유된다.
• 삭제하거나 Storage를 날리지 않는 한 삭제 되지 않는다.

로컬 스토리지에 값는 저장하는 방법은 크게 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'));

3. Session Storage

• 전체적으로 로컬스토리지와 같다.
• 사용법도 로컬스토리지와 똑같다.
• 브라우저를 닫으면 저장된 내용이 초기화 된다.

세션스토리지 사용하기

// 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'));