[js]브라우저 저장 - 쿠키, 로컬스토리지, 세션스토리지

Web Storage

key: value로 데이터를 저장하고 key로 데이터를 조회한다. LocalStorage(영구 저장소)와 SessionStorage(임시 저장소)로 나뉘어져 데이터의 지속성을 구분하여 알맞게 선택하여 사용할 수 있다. 최대 저장용량은 5MB ~ 10MB - 브라우저마다 다르다.
#local Stroage와 Session Storage의 차이는 영구성이다.

localStorage.setItem('age', 20);
localStorage.getItem('age'); // '20' (문자열)
localStorage.removeItem('age'); // null
localStorage.null

// 객체를 저장
localStorage.setItem('object', JSON.stringfy({a : 'b'}));
JSON.parse(localStorage.getItem('object')); // {a : 'b'}

local Storage

• 저장한 데이터를 영구적으로 보관 가능
• 자동 로그인, 다크모드와 라이트모드 기능에 사용된다.

Session Storage

• 만료기간이 있어 브라우저를 종료하거나 새 탭을 열 때 데이터가 초기화된다. (새로고침은 유지)
• 자동 임시 저장 용도로 사용된다.
• 입력폼 저장, 비로그인 장바구니, 글쓰기 도중 내용 복구, 상세페이지에서 목록페이지로 이동할 때 스크롤 위치 값에 사용된다.
• 사용법은 로컬스토리지랑 동일하다.

Cookie

웹사이트에 유저의 정보를 저장하는 것으로 서버와 데이터를 공유하는 용도로 사용된다. 데이터의 유효기간을 지정할 수 있다. 다시 보지 않음 팝업 창 기능에 사용된다.

function setCookie(name, value, day) {
  var date = new Date(); 
  date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000); 
  document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; 
};

function getCookie(name) { 
  var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); 
  return value? value[2] : null; 
};

setCookie(key, value, time) 
getCookie(key)

장점

• 대부분 브라우저가 지원한다.

단점

• 용량이 작다.(4KB)
• http 요청마다 포함되어 api호출로 서버에 부담이 된다.
• 암호화가 존재하지 않는다. 정보 도난의 위험성이 있다.