[TIL]Local Storage vs Session Storage vs Cookies

[ Local Storage ]

• 로컬에 도메인 별로 지속되는 storage
• 브라우저를 닫았다가 다시 열어도 지속된다.
• 탭을 여러개 열어도 공유가 된다.
• 값을 지우려면 직접 지워줘야한다.

[ Session Storage ]

• 브라우저 세션 기간동안만 사용할 수 있으며 브라우저를 종료하면 삭제된다.
• 새로고침을 해도 유지된다.

[Cookie]

• 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일이다.
• 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
• 재 요청 시 저장된 값을 참조, 재사용 한다.
• 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능하다.
• 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장이 되며 하나의 쿠키는 4KB까지 저장 가능하다.
• 이름, 값, 만료 날짜(저장 기간), 경로 정보가 있어야하며 일정시간 동안 데이터를 저장할 수 있다.
• 같은 도메인 상에서 쿠키의 값은 공유된다.
• 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.

---

공통점

• 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다.
• 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다.
• 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form)
• 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다.
• 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다.
• 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다.
• 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다.

Web Storage 와 Cookies 비교

• 쿠키는 매번 서버로 전송된다.
  웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다.
  이는 네트워크 트래픽 비용을 줄여 준다.

• 객체정보를 저장할 수 있다.
  문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다.
  (브라우저 지원 여부 확인)

• 용량의 제한이 없다.
  쿠키는 개수와 용량에 있어 제한이 있다.
  하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. 그러나 Web Storage에는 이러한 제한이 없다.

• 영구 데이터 저장이 가능하다
  쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
  WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

참고
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage
https://fathory.tistory.com/33