Cookie, Session, Local Storage 공통점

DB를 사용하지 않고 데이터를 임시적인 용도로 저장할 때 사용한다.

• 다 같은 저장소(storage)이지만, 그들만의 특성이 있다.

1. Cookie

• 만료 시간을 가지고 있다.
• 저장된 데이터가 백엔드 API 요청시에 자동으로 함께 전송
• 백엔드에서 데이터를 쿠키에 넣어서 API 응답시 프론트에 전달할 수 있다.
• httpOnly, secure등의 옵션을 설정해줄 수 있습니다.
  • httpOnly : 브라우저에서 Javascript를 이용해 쿠키에 접근할 수 없습니다. 통신으로만 해당 데이터를 주고받을 수 있습니다.
  • secure : https 통신시에만 해당 쿠키를 받아올 수 있습니다.
• 브라우저를 종료한 후 다시 들어와도 기록이 남아있습니다.

쿠키는 데이터를 넣게 되면 백엔드에도 보낼 수 있고 백엔드에서도 쿠키에 데이터를 담아서 보내 줄 수도 있다.
그러다 보니까 보안 문제가 생긴다 (백엔드와 주고받고 하다보니까)
그러다보니 옵션들이 들어가게 되는 것(httpOnly, secure) 등

2. 로컬스토리지

- 데이터를 브라우저에 저장합니다. (사용자가 데이터를 지우지 않은 한 영구적 보존)
- 브라우저를 종료한 후 다시 들어와도 저장 기록이 남아있습니다.
    - 사이트 재방문시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높음
- 사용자 설정 저장, 브라우저 닫고 열어도 정보가 남아야 하는 것들을 저장할때 사용!

>로컬 스토리지 이용해서 배열저장, 배열 안에는 객체를 여러 개 저장.
이런 식으로 저장하면 장바구니처럼 사용할 수 있을 것
로그인은 안했지만 장바구니에 담은 것처럼 뽑아서 보여줄 수 있을 것이다.

3. 세션스토리지

- 데이터를 브라우저에 저장합니다.
- 브라우저를 종료할 때 삭제됩니다. (데이터의 세션이 끝나면 데이터가 사라짐)
- 휘발성 데이터를 저장할 때 사용