쿠키, 세션, 캐시, 로컬스토리지의 차이?

Yiseul·2022년 1월 16일
1

조각지식

목록 보기
13/20

HTTP는 데이터를 주고받기 위해 정의한 통신 프로토콜,
웹 브라우저와 웹 서버간의 커뮤니케이션을 위한 통신 체계

HTTP/HTTPS 차이점

HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다.
HTTPS는 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 공개키 암호화를 지원하고 있다.
HTTP 형식으로 입력한 정보를 보낼 경우, 입력한 형태 그대로 보내지게 된다.
HTTPS를 사용할 경우, 이 통신 요청(request)을 보낼 때 응답(response)을 해주는 서버만 알아볼 수 있도록 정보를 암호화해서 보내게 된다. 또한 HTTPS는 기관으로부터 검증된 사이트만 주소에 HTTPS 사용이 허가되기 때문에, 내가 접속한 사이트가 상대적으로 안전한 주소를 가졌음을 증명하는 것이기도 하다.

Cache

웹 캐시 또는 HTTP 캐시는 서버 부하를 방지하기 위해 웹 문서, 이미지 등의 자원을 임시 사용자 웹 브라우저에 저장하는 기술로 HTTP 통신시 임시 저장된 캐시가 있다면 불필요한 데이터 전송을 줄이고 서버에 불필요한 요청을 줄여주어 빠른 통신이 가능해지며 페이지 로딩 속도를 개선한다.

쿠키와 세션

HTTP는 항상 연결되어있는 것이 아닌 필요할 때마다 요청을 보내고 응답을 반는 비연결성이라는 특징을 가지고 있다.
이는 클라이언트가 응답을 받으면 서버는 접속을 끊는다는 것인데, 연결이 끝나면 상태 정보가 유지되지 않는 특성이 있다.
로그인을 한 뒤, 다른 도메인으로 이동했다 기존 사이트로 돌아오면 로그인 정보가 유지되지 않는다는 것
이렇게 유지되지 않는 로그인 정보를 유지하기 위한 방법이라 할 수 있으며 세션은 쿠키의 일종이다.

쿠키

HTTP의 일종으로 서버가 사용자 웹 브라우저 즉 로컬에 저장하는 데이터를 뜻한다.
로컬에 파일 형태로 저장되기 때문에 요청 속도는 서버를 통하는 다른 저장소보다 비교적 빠르다. 하지만 사용자의 로컬에서 관리되기 때문에 보안적인 부분에서 취약할 수 있다는 단점이 있다.
document.cookie 를 통해 쿠키 스토리지에 저장된 사용자 권한이 있는 쿠키에 접근한다.

e.g)
1. 방문했던 사이트에 다시 방문 하였을 때 아이디와 비밀번호 자동 입력
2. 팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크

Cookies는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다. 그리고 문자열만 저장할 수 있다는 제한이 있다.

  • Seesion cookies는 만료일을 포함하지 않습니다. 대신에 브라우저나 탭이 열려있는 동안에만 저장됩니다. 브라우저가 닫히면 cookies는 영구적으로 삭제됩니다. 이 유형의 cookies는 은행 웹사이트 내에서 작업을 하고 있다가 탭을 닫으면 모든 정보를 잊어버리기 때문에 은행 유저들의 자격 증명을 저장하는데 사용될 수 있습니다.
  • Persistent cookies는 만료일을 가집니다. 이 cookies는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제됩니다. 유저들이 방문할때마다 유저 경험을 커스텀하기 위해 특정 웹사이트에서 행동을 기록하는 등 여러 활동들에 사용될 수 있습니다.

세션 Seesion cookies

세션은 쿠키를 기반으로 하지만 쿠키는 사용자 웹 브라우저에서 관리된다면 세션은 서버에서 관리된다. 쿠키를 이용해서 세션id만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 보안적인 부분에서는 로컬에 저장되는 쿠키보다 우수하지만 요청 속도는 서버의 처리가 필요한 세션에 비해 쿠키가 우수하며, 세션은 (만료기간을 정할 수는 있지만) 브라우저가 종료되면 그에 상관없이 삭제된다.

localStorage

세션과 비슷한 역할을 하지만 라이프 사이클이 다르다. 세션은 브라우저를 종료하거나, 브라우저가 서로 다르거나, 도메인 마다 별도의 세션을 가져서 데이터의 유효성이 있지만 로컬스토리지는 직접 지우지 않는다면 별도의 만료기간이 없다는 큰 차이가 있다.

HTML5가 나온 이후, cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체되었다. LocalStorage는 cookies보다 더 많은 장점이 있기 때문이다. 가장 중요한 차이점 중 하나는 cookies와는 달리 모든 HTTP 요청에서 데이터를 주고받을 필요가 없다. HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다.
데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문이다.
또 LocalStorage는 cookies가 보유할 수 있는 4KB보다 훨씬 더 많은 최대 5MB의 정보를 저장할 수 있다.
LocalStorage의 만료 조건은 persistent cookies처럼 동작합니다. Javascript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않는다. 이 방식은 더 오랜 시간동안 저장해야하는 큰 데이터에 유용하다 할수 있다. 또한 LocalStorage를 사용하면 문자열 뿐 만아니라 javascript의 primitives와 object도 저장할 수 있다.

LocalStorage를 잘 사용하려면 이 상황에 저장된 데이터의 위협 수준이 매우 낮아야한다. 때문에 보안이 필요한 데이터는 로컬스토리지를 사용하지 않는 것이 좋다.


출처:

localStorage, sessionStorage, Cookie, Cache
쿠키 vs 로컬스토리지: 차이점은 무엇일까?

profile
즐거운 도전중입니다:)

0개의 댓글