<aside> ✔️ 02. 과제 : HTML 기초 및 JS 를 통한 DOM 조작 에 이어서 과제 진행

• 과제 제출 방법을 모른다면 위 과제 안내에서 다시 확인하세요 ! </aside>

본 과제는 앞서 배운 Web Storage 를 웹 브라우저의 중간 저장소로 활용하는 법을 익히는 목적을 가집니다

1. 웹 브라우저 저장소 : Cookie, Web Storage

해당 도메인과 관련된 데이터를 브라우저에 도메인 단위로 저장할 수 있도록 하며, 다른 도메인에서의 접근은 제한

• 만약 A 도메인에서 저장한 데이터가 있다면 B 도메인에서는 접근할 수 없다.

1.2. Cookie

• Stateful 상태성 : 서버와 클라이언트 간 상태 유지를 위해 사용
• 매번 서버에 전송 : 서버에서 설정하고, 클라이언트에 저장하며, 매번 서버로 전송
• 용량 제한 : 용량에 제한이 있기도하고, 너무 많으면 매번 서버에 거대한 똥을 전달하게 된다.
  • 많은 데이터를 저장하기엔 부적합
• 만료 설정 : 만료 날짜를 지정할 수 있고 브라우저를 닫아도 유지

1.3. Web Storage

• 서버에 전송하지 않음 : 클라이언트가 클라이언트에 저장하며, 서버로 전송되지 않음
• 용량 무제한 : 브라우저마다, 모바일/데스크탑에 따라 용량 제한이 다르지만 쿠키에 비해서 크다 (5~10MB)

1.3.1. Local Storage (localStorage)

• 브라우저를 닫았다가 열어도 데이터가 남아있습니다.
• 도메인마다 별도 생성, 도메인만 같다면 공유 가능

1.3.2. Session Storage (sessionStorage)

• 페이지 세션이 유지되는 동안만 데이터가 유지됩니다. 브라우저를 닫으면 데이터가 삭제됩니다.