브라우저 저장소의 차이점

HTTP

• 클라이언트 (request) → 서버
• 클라이언트 ← (response) 서버

• 통신이 끝나게 되면 인증에 쓰이는 상태 정보를 유지하지 않음
• 통신을 할 때 마다 새로 연결을 해줘야해서 유저 입장에서 굉장히 불편함.
  • 웹 사이트에서 로그인을 해도 다른 페이지, 탭으로 이동하게 되면 로그인을 다시 해줘야함.
• 로그인한 정보를 어딘가에 저장하면 문제를 해결할 수 있다.
  • 그래서 그때 사용되는 것이 브라우저의 스토리지

브라우저 저장소의 종류

1. 쿠키(Cookie)
2. 웹 스토리지 (Web Storage) → HTML5부터 제공됨.
   1. 로컬 스토리지 (LocalStorage)
   2. 세션 스토리지 (SessionStorage)

그래서 얘네가 하는 역할이 뭔데?

• 쿠키
  • 서버가 클라이언트에게 전송하는 작은 데이터 파일 (이름, 값, 도메인 정보, 경로 정보, 만료 일자와 시간 등등)
  • 만료일자 설정o = 지속적 쿠키, 만료일자 설정x = 세션 쿠키
    • 세션 쿠키 = 탭 윈도우가 닫히면 삭제
    • 지속적 쿠키 = 디스크에 저장, 임의로 삭제 or 만료일까지 데이터 저장
      • 맨날 우리가 쿠키 삭제하는 놈이 이거
  • ex) 다시보지않기 팝업 창
  • 단점
    • 쿠키 설정을 하면 이후 모든 요청은 쿠키 정보를 포함하여 서버로 전송 ( 불필요한 트래픽 발생 )
    • 저장 용량이 작음
    • 보안에 취약

• 웹 스토리지
  • 쿠키의 단점을 보완해 등장
  • 쿠키와 기능은 유사하지만 클라이언트에 저장, 서버로 전송 X
  • 키(key)와 밸류 (value)의 값으로 데이터를 저장

localStorage.setItem("username", "이석찬") // 내 브라우저에 저장

// 서버에서 데이터를 주는게 아닌 "브라우저에 있는거 알아서 써서 유저한테 보여줘"
const username = localStorage.getItem("username");
if (username) {
  document.body.innerHTML = `안녕하세요, ${username}님`;
}

• 로컬 스토리지
  • 브라우저 자체에 반영구적으로 데이터를 저장
  • 브라우저를 종료해도 데이터가 유지
    • 얘도 우리가 삭제하지않는 이상 사라지지않고 브라우저에 남는데 우리는 왜 맨날 인터넷 속도가 느리면 쿠키만 삭제할까?
    • 위 쿠키 단점에도 설명한거처럼 쿠키는 모든 요청에 쿠키 정보를 포함해서 서버로 보냄
    • 쿠키가 쌓일수록 보내는 쿠키가 많아져서 인터넷 속도에 영향을 미치지만 로컬스토리지는 단순 클라이언트에 저장하기 때문에 서버에 보내는 일이 없어 느려지지않음.
  • ex) 다크모드 여부, 최근 본 항목, 글 작성 중 임시 저장, 자동 로그인(보안에 취약하여 HTTP-only 쿠키로 넘어감)→ XSS(악성 스크립트)

• 세션 스토리지
  • 탭 윈도우 단위로 생성
  • 탭 윈도우를 닫을 때 데이터가 삭제 ( 세션 쿠키와 유사 )
  • ex) 입력 폼 정보, 비로그인 장바구니 기능

참고 영상

• https://www.youtube.com/watch?v=5s--sLWzuZc