React. 브라우저 저장공간 (localStorage, sessionStorage, cookies)

• 브라우저에서 관리되는 저장공간에는 대표적으로 localStorage, sessionStorage, cookies가 있다.

localStorage

• 데이터를 도메인별로 저장하며 동일한 도메인의 모든 페이지에서 접근할 수 있다.
• 영구적으로 저장하기 때문에 브라우저를 닫아도 데이터가 유지된다.(만료기간 설정이 불가하므로 직접 구현해야 한다.)
• 문자열 형태의 키-값 쌍으로 데이터를 저장하며 대략 5 ~ 10MB의 저장공간을 가진다.
• 모든 동작이 동기적으로 처리가 된다.
• 로그인 정보, 사용자 설정 등 영구적으로 유지되어야 하는 데이터에 사용된다.

sessionStorage

• 데이터를 도메인별로 저장하며 브라우저 세션 동안만 유지되기 때문에 브라우저는 닫으면 데이터가 소멸된다.
• 문자열 형태의 키-값 쌍으로 데이터를 저장한다.
• 모든 동작이 동기적 처리가 된다.
• 로그인 세션, 임시 작업 정보 등 브라우저 세션 동안에만 필요한 데이터에 사용된다.

Cookies

• 데이터를 도메인별로 저장하며 브라우저를 닫아도 일정 기간동안 유지될 수 있다.
• 문자열 형태의 키-값 쌍으로 데이터를 저장한다.
• 클라이언트 측에서 작은 양의 데이터를 저장하는데 사용하지만 보안상의 이유로 민감한 정보는 저장하지 않는 것을 권장한다.
• 서버에서 쿠키를 받을 수도 있고, 서버에서 쿠키를 읽을 수도 있다. (쿠키는 서버에서 클라이언트로 전송되어 클라이언트의 브라우저에 저장이 된다. 클라이언트가 서버에 HTTP 요청을 보낼 때 브라우저는 해당 도메인에 저장된 모든 쿠키를 요청과 함께 서버로 전송한다.)
• 서버와 클라이언트간의 상태를 유지하거나 세션 관리, 사용자 추적 등에 사용된다.