쿠키, 세션 웹스토리지 차이점

이보아·2024년 4월 18일
0

쿠키(Cookie)


쿠키를 사용하게 된 이유

*HTTP 프로토콜의 특성인 비연결 지향과 무상태에 특성과 로그인이나 브라우저 입력값이 요청마다 초기화 되는 문제때문의 해결책으로 쿠키를 사용하게 되었다.

HTTP 프로토콜은 무엇인가요?

인터넷 상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다.
비연결성지향, 무상태의 특성을 가지고 있다.

비연결성지향 : HTTP가 클라이언트에 요청을 서버에 보내면 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성
무상태 : 서버가 클라이언트의 상태 정보를 저장하지 않는다. 클라이언트가 서버에 요청을 보내도 서버는 요청간에 관계를 알지 못한다.

쿠키란?

쿠키는 서버가 사용자의 브라우저에 전송하는 키-값 구조의 작은 크기의 문자열 이고 용량은 4KB입니다. 브라우저는 데이터를 저장해 놓았다가 동일한 서버에 재 요청 시 저장된 쿠키를 헤더에 담아서 전송합니다.

쿠키의 활용 예시

  • 로그인 화면에서 '아이디 자동 완성' 기능
  • 팝업 화면에서 '오늘 하루 보지 않기' 기능
  • 미 로그인 상태에서 '장바구니 담기' 기능

세션(Session)

세션을 사용하게 된 이유

세션도 쿠키와 마찬가지로 정보를 저장하는데 쿠키는 브라우저에 정보를 저장하는데 세션은 서버측에서 관리하기때문에 보안적으로 더 좋기때문에 사용하게되었다.

세션이란?

세션은 서버 측에서 사용자 정보를 저장하는 방식이다. 사용자가 웹사이트에 접속하면 서버는 세션 ID를 생성하고 이 ID를 통해 사용자의 상태를 관리합니다.

세션의 활용 예시

로그아웃 전까지 '로그인 유지'가 가능한 기능


웹 스토리지(Web Storage)

클라이언트(브라우저)에 데이터를 저장할 수 있도락 HTML5부터 추가된 저장소이다. 5MB의 저장 용량을 가지고 있으며 요청마다 헤더에 포함되어 전송되지 않는다는 특징이있다. 도메인, 브라우저 범위로 데이터가 저장된다.

로컬 스토리지 / 세션스토리지

웹스토리에는 로컬스토리지, 세션스토리지가 존재한다.

  • 로컬 스토리지 : 유효기간이 없이 데이터를 저장하고, 자바스크립트를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
  • 세션 스토리지 : 탭 범위로 저장되며, 브라우저 탭이 닫힐 때까지만 데이터를 저장한다.

로컬 스토리지 활용 예시

  • 로그인 화면에서 '자동 로그인' 기능
  • 다크모드 / 라이트 모드 기능

세션 스토리지 활용 예시

  • 임시로 유지되는 입력 폼 정보 기능
  • 새로고침 시 데이터 유지 기능
  • 일회성 로그인 정보
  • 비로그인 장바구니

쿠키, 세션, 웹스토리지를 공부하며 느낀점...🤔

쿠키와 웹 스토리지는 클라이언트(브라우저)에 저장하여 속도가 빠른 대신 보안이 취약하고 세션은 서버에 저장하여 안전한대신 속도가 비교적 느려서, 프로젝트를 할 때 목적에 맞게 잘 사용하면 좋을 거 같다.

참고사이트🙇‍♀️

[JS] 쿠키 / 웹 스토리지(로컬 / 세션 스토리지) 비교하며 이해하기
쿠키, 세션, 웹스토리지란? 차이점?
쿠키와 웹 스토리지, 그리고 보안

profile
매일매일 틀깨기

0개의 댓글