[React] React Hooks - browser storage (local storage, session storage)

React Hooks - local storage

• localStorage
  • localStorage란
    • 브라우저의 데이터 저장 공간 (Web Storage)
    • domain별 반 영구적으로 보관 가능 (만료기간 설정 불가, 직접 구현)
    • key & value pair (모두 string 타입) 모두 동기적 처리
  • method
    • getItem, setItem, removeItem, clear
  • 예시

    • const data = {id: 1, name: 'Hong'};
      localStorage.setItem('user', JSON.stringify(data));
      JSON.parse(localStorage.getItem('user'));
      localStorage.removeItem('user');
      localStorage.clear();  // 모두 삭제

 

React Hooks - session storage

• sessionStorage
  • sessionStorage란
    • 브라우저의 Session별 데이터 저장 공간 (Web Session Storage)
    • domain별 일시적으로 보관 가능 (window.sessionStorage)
    • 브라우저 닫으면 날아감
    • 나머지는 localStorage와 동일 (logout시 clear)