쿠키, 로컬, 세션

김철회·2022년 10월 13일
0

어디서 오셨나요?

로컬, 세션, 쿠키가 등장하게 된 배경은 늘 그렇듯이 기존의 방식의 큰 단점 때문이다. HTTP 프로토콜의 비연결성과 무상태라는 특징 때문에 로컬, 세션, 쿠키가 등장하게 되었다.

  • 비연결성 : HTTP는 클라이언트가 요청을 서버에 보내면 서버가 응답을 보내고 연결을 끊는다.
  • 무상태 : 연결을 끊는 순간 서버와 클라이언트는 정보를 유지하지 않는다.

그렇다. HTTP 방식만으로는 사용자의 로그인 정보를 기억할 수 없기 때문에 이러한 HTTP의 특징을 해결 하기 위해 로컬, 세션, 쿠키가 등장하게 된 것이다.

쿠키(COOKIE)

만료 기한이 존재하는 key, value 형태의 저장소이다.

  • 클라이언트의 상태 정보를 로컬에 저장해두었다가 참조한다.
  • 300개까지 클라이언트에 저장이 가능하고, 하나의 도메인당 20개의 값을 가질 수 있으며 하나의 쿠키는 4kb까지 저장된다.
  • response header에 set-cookie를 쓰면 클라이언트에 쿠키를 만들 수 있다.
  • 모든 브라우저에서 지원이 가능하다.
  • 별도의 요청이 없더라도 브라우저가 request하면 자동으로 서버에 전송한다.

즉,
1) 브라우저가 request에 자동으로 서버에 전송하기 때문에 결국 모든 브라우저에서 지원이 가능하다.

하지만,
1) 매 http요청마다 api호출을 하여 서버에 부담을 주고
2) 쿠키에 담을 수 있는 값의 용량이 매우 작고
3) 따로 암호화 되어 있지 않다.

로컬스토리지(localstorage)

로컬에 저장되어 브라우저를 닫더라도 계속 유지가 되는 방식이다.

  • 로컬환경에 저장되기 때문에 브라우저를 닫아도 계속 유지가 된다.
  • 계속해서 데이터를 저장할 수 있다.

1) 데이터를 받고 영구적으로 갖고 있기 때문에 매번 요청하지 않아도 된다.

하지만,
1) html5를 지원하지 않은 브라우저에서는 사용이 불가능하다. 즉, 모든 브라우저에서 지원이 어렵다.

세션스토리지(sessionstorage)

말 그대로 세션에 저장이 된다. 세션이 종료 즉, 브라우저가 종료되면 사라진다.

이에 따라,
1) 일시적으로 필요한 데이터를 저장하기 때문에 매번 서버에 요청하지 않아도 된다.
2) 대신 용량이 크다.

하지만,
1) 모든 브라우저에서 지원하지 않는다.

어떤 때에 어떤 방식을 사용하면 될까?

입력 폼 정보 : 세션 스토리지 // 브라우저를 켜는 동안에는 정보가 기억되어야 하고 끄면 사라지면 된다.

비로그인 장바구니 : 세션 스토리지 // 로그인하지 않았을 때이기 때문에 켜는 동안에만 기억되면 된다.

상세페이지에서 목록 페이지로 이동할 때 스크롤 위치 값 : 세션 스토리지 // 브라우저 간 이동 시에만 유효하면 된다. 로컬이라면 매번 해당 스크롤 위치 값으로 이동할 것이다.

자동 로그인 기능 : 로컬 스토리지 // 매번 자동으로 로그인해주기 때문에 영구적으로 기억되어야 한다.

다시 보지 않음 팝업 창 기능 : 쿠키 // 유효기간이 설정되어 있기 때문에 쿠키로 관리하는 게 좋다.

profile
안녕하세요!

0개의 댓글