서버가 만든 쿠키와 웹 스토리지

- 웹 스토리지
    - 로컬 스토리지
    - 세션 스토리지
- 쿠키
- 참고 

 

웹스토리지

• 지속성에 따라  | 로컬 스토리지, 세션 스토리지 | 로 나뉜다.
• 문자열 키와 문자열 값을 연결한 지속성 있는 객체이다.
• 웹 스토리지는 사용하기 쉽고 꽤 많은 데이터를 저장할 수 있다. (방대한 양을 저장할 수는 없다.)
• 스토리지 객체의 프로퍼티 값에는 문자열만 쓸 수 있다.
• 쿠키와 기능은 유사하지만 클라이언트에 저장만 할 뿐 서버로 전송되지 않는다.
• 키와 값의 형태로 데이터를 저장한다.

---

로컬 스토리지

• 로컬 스토리지에 저장된 데이터는 반영구적으로 데이터를 저장한며 만료되지 않는다.
• 웹 애플리케이션에서 삭제하거나 사용자가 브라우저 UI를 통해 삭제하지 않는 한 사용자의 장치에 계속 남는다.
• 출처가 같은 문서는 데이터 공유하지만, 출처가 다른 문서는 절대 서로의 데이터를 읽거나 수정할 수 없다.
• 로컬 스토리지에 저장된 데이터가 변경될 때마다 그 데이터를 볼 수 있는 모든 윈도우 객체에서 스토리지 이벤트가 일어난다. 데이터를 변경한 창(탭)에서는 이벤트가 일어나지 않지만, 브라우저와 출처가 같은 문서를 연 다른 탭에서는 스토리지 이벤트를 수신한다.
• 브라우저에 종속된다. 파이어 폭스 방문한 후 크롬으로 방문하면 처음 방문 데이터는 없다.
• [기능] 자동 로그인 기능
• [참고] https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

---

세션스토리지

• 세션 스토리지에 저장된 데이터는창(탭) 단위로 생성이되고 최상위 창이나 브라우저 탭이 닫힐 때 사라진다. ( 최근 부터는 마지막 세션 복구 시에는 불러올 수 있다.)
• 문서 출처에 종속되므로 출처가 다른 문서는 세션스토리지 공유할 수 없다.
• 세션스토리지는 창(웹)에도 종속된다. 사용자가 같은 출처의 문서를 브라우저 탭 두개에 각 각 열었따면, 두개의 세션스토리지 데이터는 서로 구분 된다. 탭1에서 실행중인 스트립트는 탭 2의 스크립트에서 저장한 데이터를 읽거나 수정할 수 없다.
• [기능] 입력 폼 정보, 비로그인 장바구니 기능
• [참고] https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Window.sessionStorage - Web APIs | MDN

 

---

 

쿠키

• 텍스트 데이터 소량 저장하는 정도로 사용 가능하다.
• 서버가 클라이언트에게 전송하는 작은 데이터 파일이다. 이름, 값, 도메인 정보, 경로 정보, 만료 일자 와 시간 등 정보가 담겨 있다.
• 모든 브라우저에 지원이 되지만, 매번 서버에 전송이 되고 저장 용량이 작고 보안에 취약하다는 단점이 있다.
  (HTML5 부터는 쿠키의 단점을 보완해 등장한 웹 스토리지를 주로 사용한다. )
• 쿠키에 저장된 데이터는 서버에서 쓸모가 없더라도 HTTP 요청이 있을 때마다 항상 서버로 전송.
• 쿠키는 특정 웹 페이지 또는 웹사이트와 연관된 소량의 이름 붙은 데이터이며 웹 브라우저에 저장 된다.
• 쿠키 데이터는 자동으로 웹 브라우저와 웹 서버 사이에서 전송되므로 서버사이드 스크립트에서 클라이언트에 저장된 쿠키 값을 읽고 쓸 수 있다.
• 쿠키는 서버 사이드 프로그램에서 사용하도록 설계되었고 원래는 HTTP 프로토콜을 확장할 의도로 만들어 졌다.
• 쿠키를 사용할 때는 특별한 형식을 사용하는 문자열을 써서 document 객체의 cookie 프로퍼티에 저장한다.
• 각 쿠키의 수명과 범위는 쿠키 속성에 개별 지정하며 특별한 형식의 문자열을 사용하며 같은 cookie 프로퍼티에 저장한다.
• 쿠키는 기본적으로 일시적이다. 쿠키에 저장되는 값은 웹 브라우저 세션의 지속 시간 동안만 유지되며 사용자가 브라우저를 종료하면 사라진다.
• 세션이 사라져도 쿠키가 남아있길 원한다면 max-age 속성에 쿠키의 유지 시간을 초 단위로 지정해야한다. 수명을 지정하면 브라우저는 쿠키를 파일에 저장하며, 지정된 기간이 만료됐을 때만 삭제한다.
• [기능] 다시보지않기 팝업 창

---

[참고]

https://youtu.be/5s--sLWzuZc

https://youtu.be/-4ZsGy1LOiE

https://youtu.be/tosLBcAX1vk