[Javascript] 웹브라우저 쿠키와 웹스토리지의 차이점

박세화·2023년 5월 24일
0

Computer Science

목록 보기
2/3

쿠키(cookie)


쿠키 ;;

웹 서버가 전달한 내용(HTTP 프로토콜의 일부)를 브라우저가 저장하는 것. 작은 크기의 문자열이다.

클라이언트 식별과 같은 인증에 가장 많이 쓰인다.
1. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 "세션 식별자" 정보를 사용해 쿠키를 설정한다.
2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보낸다.
3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별합니다.

name=value 쌍으로 구성되어 있으며, 각 쌍은 ;로 구분한다.


웹 스토리지 객체(web storage object)

쿠키와 마찬가지로 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
sessionStorage -> 페이지를 새로고침해도 데이터가 남아있다.
localStorage -> 페이지 새로고침 | 브라우저 재실행 해도 데이터가 남아있다.

🙋‍♀️ 쿠키와 다른 점은?

📌 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청시 서버로 전송되지 않는다. 때문에 쿠키보다 더 많은 자료를 보관할 수 있다.

📌 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.

📌 웹 스토리지 객체는 도메인/프로토콜/포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

👀 Origin 이란?
웹 컨텐츠의 오리진은 scheme (protocol), hostname (domain), port of the URL 세 가지를 통해 정의된다. 이 세 가지가 모두 같아야만 같은 오리진을 공유한다고 할 수 있다.

이 두 가지 URL은 같은 오리진이다. (파일명이 다른 건 상관없다)

  • http://example.com/app1/index.html
  • http://example.com/app2/index.html

이 둘은 도메인네임이 다르기 때문에 오리진이 다르다.

  • http://example.com
  • http://www.example.com
  • http://myapp.example.com

이 둘은 포트가 다르기 때문에 오리진이 다르다.

  • http://example.com
  • http://example.com:8080

localStorage

📌 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
📌 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.

sessionStorage

📌 localStorage에 비해 훨씬 제한적이기 때문에 자주 사용되진 않는다.

📌 현재 떠 있는 탭 내에서만 유지된다. 그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다.

👀 iframe은 또 뭘까요 ㅎㅎ
= The Inline Frame Element
브라우징 콘텐츠를 담고 있는 html 엘리먼트이다. 담겨있는 브라우징 콘텐츠는 고유의 session history와 document를 갖고 있다.

📌 페이지를 새로고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.

0개의 댓글