로컬 스토리지, 세션 스토리지, 쿠키

BirdsOnTree·2022년 8월 13일

로컬 스토리지 세션 스토리지 쿠키

Web

목록 보기

2/8

로그인에 대해서 알아보던 중 여러가지 형태의 로그인 방법이 있는것을 알게되었고, 읽은것을 바탕으로 블로그에 작성해 보았다.

로컬 스토리지

로그아웃을 해도 데이터 유지 > 자동 로그인 기능

storage의 특징 문자열 데이터만 저장할수 있다.
로컬 스토리지는 브라우저 창을 닫더라도 데이터 유지된다.

장점:
용량이 커서 서버에 데이터를 저장해달라고 요청하지 않아도 된다.
단점:
HTML5를 지원하지 않는 브라우저에서는 사용이 불가하다.

localStorage.setItem('key', JSON.stringfy(value)) // 저장
JSON.parse(localStorage.getItem('key')) // 조회
localStorage.removeItem('key') // 해당 키가 삭제
localStorage.clear() // 전체삭제

세션 스토리지

로그인할때 아이디 저장 > 창을 닫으면 기록 삭제

storage의 특징 문자열 데이터만 저장할수 있다.
세션 스토리지는 브라우저 창을 닫는 순간 영구적으로 데이터 삭제

장단점은 로컬과 비슷하다.

sessionStorage.setItem('key', JSON.stringfy(value)) // 저장
JSON.parse(sessionStorage.getItem('key')) // 조회
sessionStorage.removeItem('key') // 해당 키가 삭제
sessionStorage.clear() // 전체삭제

쿠키

다시 보지 않은 팝업창 같은 경우 쿠키로 처리할 수 있다.

장점:
대부분의 브라우저가 지원
단점:
매 HTTP 요청마다 포함되어 api호출로 서버에 부담.
쿠키의 용량이 작음 (약 4KB)
암호화 존재 x -> 사용자 정보 도난 위험

function setCookie(name, value, day) {
  var date = new Date(); 
  date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000); 
  document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; 
};

function getCookie(name) { 
  var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); 
  return value? value[2] : null; 
};

setCookie(key, value, time) 
getCookie(key)

2022-11-13 추가본

쿠키는 매번 서버로 전송한다.
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다. 웹 스토리지의 경우 저장된 데이터가 클라이언트에만 존재하고 서버 전송은 발생하지 않는다. 그렇기 때문에 네트워크 트래픽이 줄어든다.
웹 스토리지는 단순 문자열을 넘어서 객체 정보 저장이 가능하다.
문자열 기반 데이터 외에 객체를 저장 할 수 있기 때문에 개발 편의성을 향상시키는 주요 장점이다.
웹 스토리지는 용량 제한이 비교적 크다.
쿠키는 개수와 용량에 제한이 있다. 한 사이트에 저장 가능한 쿠키는 최대 20개고 한 사이트의 최대 쿠키 크기는 4KB이다. 그러나 웹 스토리지에는 5MB까지 저장이 가능하다. 쿠키를 사용할 때도 하위 키를 이용해 이러한 제한을 다소 극복할 수 있고, 대부분은 쿠키의 제한까지 데이터 저장할 필요가 없긴 하다.
영구 데이터 저장이 가능하다.
쿠키는 만료 일자가 지정되어 있어서 언젠가 제거되고, 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원하면 만료일을 멀게 설정(Persistent Cookie)하여 해결 가능하다. 이에 반해 웹 스토리지는 만료기간이 없기 때문에 한번 저장한 데이터를 영구적으로 저장할 수 있다.

쿠키와 세션의 차이점

공통점: 웹 통신간 유지하려는 정보 등을 저장하기 위해 사용
차이점 : 저장위치, 저장형식, 용량제한, 만료시점 등등... 쿠키는 개인 PC에 저장되고 세션은 웹 서버에 저장

쿠키와 세션을 사용하는 이유

HTTP 프로토콜의 특징인 약점을 보완하기 위해서 사용된다.

Connectionless 프로토콜 (비연결지향)
클라이언트가 서버에 요청을 했을 때, 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식이다.
Stateless 프로토콜 (상태정보 유지 안함)
클라이언트의 상태 정보를 가지지 않는 서버 처리 방식이다.
클라이언트와 첫번째 통신에서 데이터를 주고 받았다 해도, 두번째 통신에서 이전 데이터를 유지하지 않는다.

HTTP 프로토콜은 Request를 보낸 후 Response를 보내게 되고 이후 연결이 끊긴다. 또한 주고 받은 데이터를 저장하지도 않는다.

하지만 실제로는 데이터 유지가 필요한 경우가 많다.
정보가 유지되지 않으면, 매번 페이지를 이동할 때마다 로그인을 다시 하거나, 상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없거나 하는 등의 일이 발생할 수 있기 때문이다.

서버와 클라이언트 통신 > 연결 끊김, 데이터 유지가 안됌 > 매번 통신을 할때마다 데이터를 줘야함 > 웹페이지의 로딩을 느리게 만듬

쿠키(Cookie)

HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다.
HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다.

쿠키 특징

이름, 값, 만료일(저장 기간 설정), 경로 정보로 구성되어 있다.
클라이언트에 총 300개의 쿠키를 저장할 수 있다.
하나의 도메인 당 20개의 쿠키를 가질 수 있다.
하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다.

동작 순서
클라이언트가 페이지 요청 > 웹서버에서 쿠키 생성 > 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 클라이언트에게 돌려줌? > 클라이언트가 쿠키를 가지고 있다가 서버에 요청을 할때 같이 준다 > 동일 사이트 재 방문시 클라이언트 PC에 해당 쿠키가 있을 경우 요청 페이지와 함께 쿠키를 전송

사용 예시

방문했던 사이트에 다시 방문 하였을 때 아이디와 비밀번호 자동 입력
팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크

세션(Session)

일정 시간동안 같은 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 일정하게 유지시키는 기술이다.
여기서 일정 시간은 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점을 말한다.
즉, 방문자가 웹 서버에 접속해 있는 상태를 하나의 단위로 보고 그것을 세션이라고 한다.

세션 특징

웹 서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장한다.
웹 서버의 저장되는 쿠키(=세션 쿠키)
브라우저를 닫거나, 서버에서 세션을 삭제했을때만 삭제가 되므로, 쿠키보다 비교적 보안이 좋다.
각 클라이언트 고유 Session ID를 부여한다. Session ID로 클라이언트를 구분하여 각 클라이언트 요구에 맞는 서비스 제공

세션의 동작 순서
클라이언트가 페이지를 요청 > 서버는 접근한 클라이언트의 Request-Header 필드인 Cookie를 확인하여, 클라이언트가 해당 session-id를 보냈는지 확인 > session-id가 존재하지 않는다면, 서버는 session-id를 생성해 클라이언트에 돌려줌 > 서버에서 클라이언트로 돌려준 session-id를 쿠키를 사용해 서버에 저장 > 재접속시 쿠키를 이용하여 session-id 값을 서버에 전달

사용 예시

화면이 이동해도 로그인이 풀리지 않고 로그아웃하기 전까지 유지

Q. 세션을 쓰면되는데 굳이 쿠키를 사용하는 이유?

A. 세션이 쿠키에 비해 보안도 높은 편이나 쿠키를 사용하는 이유는 세션은 서버에 저장되고, 서버자원을 사용하기 때문에 사용자가 많을 경우 소모되는 자원이 상당하다. 이러한 자원관리 차원에서 쿠키와 세션을 적절한 요소 및 기능에 병행 사용하여, 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다.

쿠키와 세션의 차이

쿠키와 세션은 비슷한 역할을 하며, 동작원리도 비슷하다. 결국 세션도 쿠키를 사용하기 때문이다.
가장 큰 차이점은 사용자의 정보가 저장되는 위치이다. 때문에 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용한다.
보안 면에서 세션이 더 우수하며, 요청 속도는 쿠키가 세션보다 더 빠르다. 그 이유는 세션은 서버의 처리가 필요하기 때문이다.
보안
쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid 만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋다.
라이프 사이클
쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다. 또한 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때 까지 유지될 수도 있다. 반면 세션도 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제된다.

출처:
[TriplexLap]
https://triplexlab.tistory.com/114
[Ykss]
https://ykss.netlify.app/web/storage_session_cookie/
[넌 잘하고 있어]
https://hahahoho5915.tistory.com/32
[RyanGomdoriPooh]
https://interconnection.tistory.com/74