쿠키 (Cookie) , 세션 (Session) , 웹 스토리지(Local storage,Session storage) 차이

우선 각각의 차이와 장단점을 알아보기전에

우리는 왜 이걸 사용해야하는걸까?


HTTP 요청과 응답은 흔히들 비연결성과 비상태성을 가졌다고한다.

- 응답을 주고받으면 바로 연결을 끊고 , 새로운 요청시에 재연결을 한다해서 비연결성

- 요청과 응답의 상태를 저장하지 않거니와 이전 기록을 기억하지 못한다해서 비상태성

 
하지만 우리는 상태를 유지하고싶은 상황이 있다

이런 비연결성과 비상태성을 보완하기 위해 우리는 쿠키 , 세션 , 웹 스토리지라는 애들을 사용한다.

 

순차적으로 각각의 장점과 단점만 간략하게 작성해보려 한다.  (set , get , remove는 담지 않으려한다.)

 

 

---

 

 

쿠키 (Cookie)

 

• 브라우저(클라이언트)에 key-value 형태로 저장하는 데이터 파일
• 유효기간을 명시할 수 있으며 유효기간이 지나지 않았다면 브라우저가 종료되더라도 유지
• httpwg 에 따르면 쿠키당 약 4kb , 도메인당 50개 , 총 쿠키는 3000개의 limit가 있다고한다.
• 브라우저가 요청시 헤더에 넣어 자동으로 서버에 전송한다.
  
  쿠키는 오랜 시간 유지될 수 있고 , 자바스크립트로 쿠키에 접근이 가능하기 때문에 민감한 정보는 제외하는것이 좋다
  
  XSS (웹사이트에 script 삽입 공격)에 대응하기 위해 httpOnly 설정을 하는게 좋다
  
  
  

세션 (Session)

 

• 서버 측에서 관리
• 클라이언트 구분위해 세션 ID를 부여하며, 서버 접속해서 브라우저 종료때까지 인증상태 유지 = 브라우저 종료시 삭제됨
• 사용자가 많아질수록 서버 메모리를 많이 차지하게됨

 

쿠키와 세션의 차이

구분	쿠키	세션
저장위치	클라이언트	서버
만료시점	쿠키 저장시 설정	브라우저 종료시
보안	비교적 취약	안전
속도	빠름	비교적 느림

 

 

 

웹 스토리지 (Web Storage)

 

• HTML5 부터 추가된 저장소
• key-value 형태로 저장하며 영구 저장소 (Local Storage) , 임시 저장소 (Session Storage)로 구분하여 사용
• 웹 스토리지는 클라이언트에만 존재하고 서버 전송하지 않음
• 객체로의 저장 가능
• 5MB까지의 데이터 저장 가능
• CSRF(크로스 사이트 요청 위조) 공격으로 부터 안전함

 

구분	세션 스토리지	로컬 스토리지
생성	새창 , 새탭 단위로 생성	도메인당 1개 생성
만료	새창 , 새탭을 닫을시 사라짐	영구적 데이터 저장

 

 

---

 

참고자료:

https://shuu.tistory.com/174  
https://hyojin96.tistory.com/entry/HTTP-%ED%86%B5%EC%8B%A0?category=855221

세션, 쿠키, 스토리지 개념

HTTP 통신