[CS] 쿠키, 세션스토리지, 로컬스토리지

 

1.  쿠키

---

• 쿠키를 사용하는 이유는 HTTP요청은 상태를 가지고 있지 않기 때문이다(Stateless) 즉, 브라우저에서는 서버에 요청을 보낼 때 그 요청 자체로는 그 요청이 누구에게서 오는지 알 수 없고, 쿠키에 정보를 담아서 보내야 서버는 쿠키를 통해 파악할 수 있게 된다.

 

• 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일이다. 
• 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다.(<-> 세션)
• 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다.
• SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다. (CSRF 취약)
• 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다.
• 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지됩니다.
• 대부분의 브라우저가 지원합니다.

 

 

 

 

2. 웹스토리지

---

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다. 
• 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
• 쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. (명시적으로만 전송 가능)
• 쿠키와 달리, 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다. 다른 도메인에서 요청하는 경우에는, 꺼내 쓰고 싶어도 도메인 단위로 접근이 제한되는 특성(CORS) 덕분에 값을 꺼내 쓸 수 없다. (CSRF 안전)
• 쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다.
• HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.
• 종류로는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있다. 이들은 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드들을 가진다. 이 둘의 가장 큰 차이점은 데이터의 영구성이다.

 

 

2-1.  로컬 스토리지

• window.localStorage 객체
• 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장된다.
• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
• 지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)

 

 

2-2. 세션스토리지

• window.sessionStorage 객체
• 세션하고 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성된다.
• 즉 window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제된다.
• 또한 동일한 탭/윈도우라도 다른 도메인이라면 또 다른 세션 스토리지가 생성된다.
  
• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
• 윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 입력 폼 저장, 일회성 로그인 등)

 

 

 

 

 

---

 

reference:

<기본 정보>

https://it-eldorado.tistory.com/90

 

 

<추가 심화 정보> <- 꼭 읽어볼 것! (쿠키,세션비교 / 웹스토리지 상세설명)

https://ykss.netlify.app/web/storage_session_cookie/

 

<웹스토리지 쓰는 방법>

https://jess2.github.io/2018/06/06/JavaScript/JS-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-Local-Storage/