Cookie, Local Storage, Session Storage

Cookie

쿠키는 key-value 형식의 문자열로 이루어져있다 

클라이언트가 어떤 사이트를 방문할때 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 정보 파일이다  각 사용자마다 브라우저에 정보를 저장하니 고유정보 식별이 가능하다.

 

Cookie인증방식 

1. 브라우저(클라이언트)가 서버에 요청(접속)을 보낸다.
2. 서버는 클라이언트의 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 Set-Cookie에 담는다.
3. 이후 해당 클라이언트는 요청을 보낼 때마다, 매번 저장된 쿠키를 요청 헤더의 Cookie에 담아 보낸다.
   서버는 쿠키에 담긴 정보를 바탕으로 해당 요청의 클라이언트가 누군지 식별하거나 정보를 바탕으로 추천 광고를 띄우거나 한다.

 

Cookie 단점

-  제일 큰 단점은 보안에 취약 요청할때 쿠키의 값을 그대로 보내기 때문에 유출되거나 조작당할 위험이 있다 

-  용량에 제한이 있어서 많은 정보를 담을 수 없다 

-  브라우저간에 공유가 불가능하다 

-  쿠키의 크기가 커질수록 네크워크의 부하가 심해진다  

 

 

 

Local Storage, Session Storage

웹 스토리지 객체인 Local Storage, Session Storage는 브라우저 안에서 키 - 값으로 저장할수 있게 해준다 

페이지를 새로 고침하고(sessionStorage의 경우)

브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다.

 

쿠키와 다르게 웹스토리지 객체는 네트워크 요청시 서버로 전송되지 않아서 쿠키보다는 더 많은 정보를 보관할수 있습니다 

대부분 브라우저는 최소 2MB 혹은 그 이상의 웹스토리지에 객체를 저장할수 있도록 해준다 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할수 있다 

 

 

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.

• setItem(key, value) – 키-값 쌍을 보관합니다.
• getItem(key) – 키에 해당하는 값을 받아옵니다.
• removeItem(key) – 키와 해당 값을 삭제합니다.
• clear() – 모든 것을 삭제합니다.
• key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
• length – 저장된 항목의 개수를 얻습니다.

두 스토리지 객체는 Map과 유사합니다. setItem/getItem/removeItem을 지원하죠. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있습니다.

 

 

 

 

출처

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-JWTjson-web-token-%EB%9E%80-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC#Cookie_%EC%9D%B8%EC%A6%9D

 

https://ko.javascript.info/localstorage