로컬 스토리지, 세션 스토리지, 쿠키의 정의와 차이점

https://steady-snb.tistory.com/28

애플리케이션 계층(HTTP, SSH, FTP, SMTP 등)에 대해 알아보자

이전에 다루었던 HTTP의 통신방법과 특징에 대해 참고하시면 도움이됩니다.

 

먼저 HTTP라는 프로토콜의 웹 통신방식에 대해 간략히 알아보자면 웹은 클라이언트에서 HTTP Request를 통해

서버로 요청을 보내면 서버에서 HTTP Response로 응답을 하게되는 형태입니다.

여기서 HTTP의 특성 중 무상태 프로토콜/비연결성

즉, 클라이언트와 서버간 주고받은 데이터에 대해 기억을 안하면서 연결성이 매번 끊긴다는 것을 알 수 있습니다.

이렇게되면 매번 페이지에 들어갈 때 마다 로그인을 해야하는 번거로움과 유저가 자주 사용하는 키워드 등을 저장할 수 없게되는데요

그것을 보완하기 위해 쿠키,웹스토리지(로컬/세션 스토리지) 등이 나오게 되었습니다.

 

 

쿠키(Cookie)

 

최대 4KB 용량을 가진 key,value형태의 데이터로 서버로부터 전송된 쿠키는 웹브라우저에 저장되며

이후 계속해서 요청이 발생하면 서버에 쿠키를 전달합니다.

주로 유저의 로그인 정보 및 사용하는 설정, 장바구니 등을 저장하는 것과 같은 방법으로 사용되며,

문자열만 저장 가능하다는 제한이 있습니다.

 

 

동작방식

1. 쿠키와 HTTP프로토콜 : 쿠키는 HTTP프로토콜의 일부로 정의되어 있으며, 웹 브라우저와 서버간의 HTTP요청과

응답 헤더를 통해 전송됩니다. 쿠키는 사용자가 웹 사이트를 방문할 때 생성되며, 서버에서 생성한 쿠기 정보를 사용자의 웹 브라우저에 저장합니다.

 

2. 로그인 상태 유지 : 사용자가 웹 사이트에 로그인 할 때, 서버는 로그인 성공을 확인한 후 사용자의 로그인 상태를 나타내는 쿠키를 생성합니다. 이 쿠키는 사용자의 브라우저에 저장하며, 이후 사용자가 사이트 내에서 다른 페이지로 이동하거나

추후에 사이트를 다시 방문할 때 서버로 전송됩니다.

 

3. 모든 HTTP요청에 쿠키 전달 : 저장된 쿠키는 사용자의 브라우저에서 해당 사이트로의 모든 HTTP요청과 함께 자동으로

서버로 전송됩니다. 이를 통해 서버는 쿠키 정보를 확인하고, 사용자가 인증된 상태인지 판단할 수 있습니다.

이렇게 되면, 사용자는 로그인 상태를 유지할 수 있고 서버는 각 요청이 동일한 사용자로부터 온 것임을 알 수 있습니다.

 

 

2가지 유형

1) Persistent cookie : 만료일을 포함하는 쿠키

만료일까지 유저 디스크에 저장되며 만료일이 지나면 삭제됩니다.

유저들에 대한 맞춤형 서비스를 제공하기 위해 특정 웹사이트에서 행동을 기록하는 것과 같은 여러 활동에 사용될 수 있습니다.

 

2) Session cookie :  만료일을 포함하지 않는 쿠키

브라우저가 열려있는 동안만 유지되며, 브라우저가 닫힐 때 영구적으로 삭제됩니다.

예를 들면, 은행 웹사이트는 브라우저를 닫으면 모든 정보를 삭제하기 때문에 사용자들의 정보를 안전하게 관리할 수 있습니다.

 

 

보안방식

Secure 및 HttpOnly 플래그와 같은 옵션을 사용하여 쿠키의 보안을 강화할 수 있습니다.

 

* Secure : 이 플래그가 설정된 쿠키는 HTTPS 연결을 통해서만 전송됩니다. 즉, 데이터가 암호화되어 전송되기 때문에

                 네트워크를 통한 공격으로부터 보호할 수 있습니다.

 

* HttpOnly : 이 플래그가 설정된 쿠키는 웹 서버에 의해서만 액세스 될 수 있고, 클라이언트측 스크립트(자바스크립트)

                    에서는 접근할 수 없습니다. 이는 크로스 사이트 스크립팅(XSS)공격으로부터 쿠키를 보호할 수 있습니다.

 

 

 

로컬 스토리지(LocalStorage)

 

HTML5가 나오고 Cookie를 사용하던 많은 방법들은 LocalStorage의 사용으로 대체되었습니다.

LocalStorage는 Cookie와 달리 모든 HTTP요청에서 데이터를 주고받을 필요가 없다는 것 입니다.

HTTP요청에서 데이터를 주고받지 않고 LocalStorage를 사용하면 클라이언트와 서버간의 전체 트래픽과

낭비되는 대역폭의 양을 줄일 수 있습니다. 데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도

데이터가 삭제되거나 지워지지 않기 때문입니다.

또한, 최대 저장용량은 5MB로 쿠키와 비교했을 때 훨씬 많은 정보를 저장할 수 있습니다.

로컬 스토리지는 기본적으로 만료기한이 없기 때문에 사용자가 명시적으로 지우거나, 브라우저의 캐시/로컬 스토리지를

지울 때 까지는 계속해서 남아있습니다.

로컬 스토리지는 동일한 Origin(동일 프로토콜, 도메인, 포트)를 공유하는 모든 탭/윈도우에서 공유됩니다.

예를들어, 같은 사이트를 여러 탭에서 열었을 때, 모든 탭과 같은 로컬스토리지에 접근하고 수정할 수 있습니다.

 

다만, 로컬스토리지는 그 자체로는 보안기능을 제공하지 않으므로 보안이 중요하거나 민감한 데이터를 저장하는 것은

적합하지 않을 수 있습니다.

데이터 보안이 필요한 경우네는 서버 측 세션스토리지, HTTPS를 통한 데이터 전송, 데이터 암호화 등 추가적인

보안조치를 고려해야 합니다.

 

 

세션 스토리지(SessionStorage)

 

세션 스토리지는 브라우저 종료와 같이 데이터 세션이 끝나면 데이터가 삭제되는 스토리지로 주로 휘발성 데이터를 

저장할 때 사용됩니다.

세션 기간동안만 데이터를 저장하기 때문에 보안 측면에서 유리하다는 장점이 있고 용량은 최대5MB입니다.

쿠키와 달리 탭/윈도우 단위로 세션 스토리지가 생성되며, 서로 다른 세션 스토리지는 서로 영향을 주지 않고 독립적이며

일회성 로그인이나 입력 폼 저장과 같이 잠깐동아만 필요한 정보를 저장할 때 사용합니다.

 

 

 

 

쿠키(Cookie)와 웹 스토리지(로컬/세션 스토리지)의 차이

 

웹 스토리지에 저장된 데이터는 클라이언트에서만 접근 및 관리가 가능하며, 자동으로 서버에 전송되지 않습니다.

서버와의 통신이 필요한 경우, 자바스크립트를 통해 데이터를 읽고 명시적으로 서버로 전송해야합니다.

쿠키는 해당 쿠키가 생성된 도메인으로부터 모든 HTTP요청과 함께 자동으로 서버에 전송됩니다.

이는 웹 서버가 사용자의 상태를 유지하고, 세션관리, 사용자인증, 사이트 선호도 설정 등을 할 수 있도록 돕습니다.

물론 특정 도메인과 경로에 대한 요청에만 포함되도록 선택적 전송도 가능합니다.

 

 

출처 - https://sunrise-min.tistory.com/entry/Cookie-vs-LocalStorage-vs-SessionStorage

Cookie vs LocalStorage vs SessionStorage : 차이점은 무엇일까?

https://velog.io/@abcwockd95/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%BF%A0%ED%82%A4

[기술면접] 로컬스토리지, 세션스토리지, 쿠키