웹 스토리지 & 쿠키

군침이 싸아악 도는 쿠키

📚 참고자료

• 티스토리 블로그 [Untitled] 웹 스토리지(Web Storage)의 특성과 사용법 => 링크​
• 벨로그 [hellozin] 쿠키, 세션 그리고 웹 스토리지 => 링크

* 공부 목적으로 위 참고자료를 보고 정리한 글입니다.

---

 

🍪 쿠키란?

쿠키는 클라이언트 로컬에 저장되는 키와 값 형태의 작은 파일로 이름, 값, 만료 시간, 경로 정보가 들어있습니다.

 

쿠키는 주로 세 가지 목적을 위해 사용됩니다.

• 세션 관리: 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
• 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등의 세팅
• 사용자 추적: 사용자의 행동을 기록하고 분석하는 용도

 

'Response Header' 의 'Set-Cookie' 속성을 사용하면 클라이언트에 쿠키를 만들 수 있으며 만들어진 쿠키는 클라이언트가

따로 설정하지 않아도 브라우저가 Request Header에 넣어서 서버로 전송하게 됩니다.

 

서버의 HTTP 응답 헤더에서 쿠키를 설정합니다.

 

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: name=ant
Set-Cookie: age=2

 

 

이 후 클라이언트에서 보내는 모든 요청에 브라우저는 Cookie 헤더를 통해 저장된 모든 쿠키를 전송합니다.

Get /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: name=ant; age=2

 

이렇게 만들어진 쿠키는 스코프에 의해 크게 두가지로 나눌 수 있습니다.

 

• 클라이언트가 종료되면 삭제되는 휘발성 쿠키 => Session Cookie
• 클라이언트가 종료되어도 일정 기간 유지되는 쿠키 =>  Permanent Cookie

Permanent Cookie는 Expires(날짜와 시간) 혹은 Max-Age(초) 를 명시해 해당 날짜, 혹은 시간까지 쿠키를 유지할 수 있고

아무것도 명시하지 않을 경우 Session Cookie 가 됩니다.

 

Set-Cookie: name=ant; Expires=wed, 21 oct 2022 08:20:00 GMT;

 

💾 웹  스토리지란?

웹 스토리지(Web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹스토리지는 약 5MB까지

저장 공간을 이용할 수 있다.

 

웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용된다.

 

 

1. 로컬 스토리지 (Local Storage)

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.

브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인(domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다.

 

 

2. 세션 스토리지(Session Storage)

세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것이다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

 

 

 

---

면접에서 세션과 쿠키에 대한 질문을 여러번 받았습니다.

하지만 제대로 답하지 못했었습니다.

웹 프로그래밍을 배우면서 초반에 나온 개념이지만 제대로 안보고 그냥 넘어갔다는 것을 알게되어  이렇게 블로그에 적어봤습니다.

 

 

알게된 점

• 웹 스토리 API는 기존 쿠키의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해줬다.
• 세션을 물어본건 결국 웹 스토리지에 대한 개념을 물어본 것
• 쿠키는 클라이언트와 서버가 서로 주고 받을 수 있다.
• 쿠키는 유효기간을 설정 할 수 있다(Expire)
• 도메인에 대한 지식을 알아야겠다고 생각했습니다.