[React] 리액트 Cookie 쿠키 / LocalStorage 로컬스토리지 / SessionStorage 세션스토리지

Cookie

• 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일
• 사용자의 로그인 정보를 저장하는 등 다양하게 활용
• 문자열만 저장 가능
• Session Cookie : 브라우저 종료 시 쿠키 삭제
• Persistent Cookie : 만료일자를 지정하여 해당 일자에 삭제
• 저장 용량 : 4KB

     1) Cookie 저장

  // Session Cookie ( 키 = 값;) //
  
  <script>
    document.cookie = 'key1=value1';
    document.cookie = 'key2=value2';
  </script>

 // Persistent Cookie ( 키 = 값; expires = 만료일자; ) //
 
 <script>
    document.cookie = 'key1=value1';
    document.cookie = 'key2=value2;expires=Sun, 01 Jan 2040 00:00:00 GMT';

    let cookies = 'key3=value3;';
    const expires = new Date();
    expires.setDate(expires.getDate() + 1); // 1일이 지난 후 쿠키 삭제
    cookies += "expires=" + expires.toGMTString() + ";";
    document.cookie = cookies;
  </script>

 

 

Local Storage

• 자바스크립트에 의해 사용자의 PC(브라우저)에 저장되는 파일
• 사용자의 로그인 정보를 저장하는 등 다양하게 활용
• 객체 저장 가능
• Persistent : 자동으로 삭제되지 않음
• 저장 용량 : 5MB 이상

  // Local Storage 활용 //
  
  <script>
    localStorage.setItem('key1', 'local value1');
    localStorage.setItem('key2', 'local value2');
    console.log(localStorage.getItem('key1'));
    console.log(localStorage.getItem('key2'));
  </script>

 

Session Storage

• 사용자의 로그인 정보를 저장하는 등 다양하게 활용
• 객체 저장 가능
• Session : 브라우저 종료 / 탭 종료 시 삭제
• 저장 용량 : 5MB 이상

  // Session Storage 활용 //
  
  <script>
    sessionStorage.setItem('key1', 'session value1');
    sessionStorage.setItem('key2', 'session value2');
    console.log(sessionStorage.getItem('key1'));
    console.log(sessionStorage.getItem('key2'));
  </script>

→ 웹 서버(Back-end)에서 활용 : Cookie

→ 대용량 / 객체 활용 : Local Storage

→ 데이터 임시 활용 : Session Storage