22.09.20./TIL(로컬 스토리지, 세션 스토리지, 쿠키)

1. 로컬 스토리지

localStorage.setItem("key", value) //저장
localStorage.getItem("key") //조회
localSorage.removeItem("key") //삭제

• 쿠키의 단점을 보완해 HTML5 에서 "웹스토리지" 기술 탄생
  • 웹스토리지 : 로컬스토리지, 세션스토리지
    
    • key, value 형태로 이루어짐
    • 클라이언트에 대한 정보를 저장함
    • 웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장함
• storage의 특정 문자열 데이터만 저장할 수 있습니다.
• 브라우저 창을 닫더라도 데이터가 유지 됩니다.
• 장점
  • 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 됨
  • 용량이 큼
• 단점
  • HTML5를 지원하지 않는 블아줘의 경우 사용 불가
• 저장하면 좋은 데이터 유형
  • 자동 로그인 기능
  • 다크 모드와 라이트 모드 기능

2. 세션 스토리지

sessionStorage.setItem("key", value) //저장
sessionStorage.getItem("key") //조회
sessionSorage.removeItem("key") //삭제

• storage의 특정 문자열 데이터만 저장할 수 있습니다.
• 브라우저 창을 닫는 순간 영구적으로 데이터를 삭제합니다.
• 장점
  • 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 됨
  • 용량이 큼
• 단점
  • HTML5를 지원하지 않는 브라우저의 경우 사용 불가
• 저장하면 좋은 데이터 유형
  • 입력 폼 정보 저장
  • 비로그인 장바구니
  • 상세페이지에서 전체 페이지로 이동할 때 스크롤 위치 값

3. 쿠키

import Cookies from "universal-cookie";
const cookies = new Cookies();

export const setCookie = (name, value, option = null) => {
  return cookies.set(name, value, { ...option });
};

export const getCookie = (name) => {
  return cookies.get(name);
};

export const deleteCookie = (name) => {
  return cookies.remove(name);
};

• 쿠키는 만료 기한이 있는 key, value 형태의 저장소입니다.
• 장점
  • 대부분의 브라우저가 지원
• 단점
  • 매 HTTP요청마다 포함되어 api 호출로 서버에 부담
  • 쿠키의 용량이 작음
  • 암호화가 존재하지 않음 => 사용자 정보 도난 위험
• 저장하면 좋은 데이터 유형
  • 팝업 창 기능

 

 

출처 : https://triplexlab.tistory.com/114