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

GJ·2023년 5월 10일
1

프론트엔드지식

목록 보기
10/14

쿠키

쿠키(Cookie)는 클라이언트 측에서 저장되는 작은 데이터 파일이다. 웹 사이트가 사용자를 인식하고 그들의 상태를 기억하는 데 사용된다. 쿠키는 일반적으로 사용자의 로그인 정보, 선호도, 장바구니에 있는 항목 등과 같은 데이터를 저장하는 데 사용된다.

쿠키는 HTTP 요청 및 응답 헤더를 통해 생성된다. 서버는 클라이언트에 쿠키를 설정하도록 지시하고, 클라이언트는 쿠키를 저장하고 나중에 요청과 함께 서버로 보낸다.

쿠키는 보안에 취약하며, 민감한 정보를 저장하는 데 적합하지 않다. 또한, 쿠키는 클라이언트 측에 저장되므로, 사용자가 다른 브라우저에서 웹 사이트를 방문할 경우, 이전에 저장된 쿠키는 사용할 수 없다. 따라서 쿠키는 단기적인 정보를 저장하는 데 적합하다.

즉, 쿠키의 저장위치는 클라이언트이지만, 저장을 하는것은 서버의 응답헤더나 클라이언트의 요청헤더에 의해 모두 추가될 수 있다. 그리고 HTTP 메세지에 지속적으로 포함된다.

세션

세션(Session)은 웹 서버(Web Server)에서 지원하는 기능으로 클라이언트(Client)의 요청(Request)에 대해 서버가 클라이언트를 식별할 수 있는 정보를 생성하고, 이 정보를 저장하여 서버와 클라이언트가 연결되어 있는 상태를 유지하는 기술을 말한다.

세션을 사용하면 사용자가 로그인하고 나서 해당 웹 사이트를 이용하는 동안 계속해서 로그인 상태를 유지할 수 있다. 세션을 이용하면 사용자의 브라우저에서 쿠키를 사용하여 로그인 정보를 저장하는 것보다 보안성이 높아진다.

세션은 클라이언트와 서버 간에 상태를 유지하기 위해 일정 시간 동안 정보를 저장하는 방법이다. 이 정보는 서버에서 관리되며, 세션 ID라는 고유한 값으로 식별된다. 클라이언트가 서버로 요청(Request)을 보낼 때마다 세션 ID를 함께 보내서 서버가 세션 정보를 가져오게 된다.

세션의 구현 방법은 언어나 프레임워크에 따라 다르지만, 일반적으로는 세션 ID를 쿠키(Cookie)나 URL 매개변수(Parameter)에 담아서 전송한다. 클라이언트가 요청을 보낼 때마다 세션 ID를 확인하여 해당 세션 정보를 가져오는 방식이다.

즉, 세션의 저장위치는 서버이고, 세션을 제어하는것도 서버이다. 클라이언트는 다른 클라이언트와 식별되기 위해서 세션정보를 요청에 넣어서 보내주어야 한다.

로컬 스토리지

로컬스토리지(Local Storage)는 웹 브라우저에 데이터를 저장하는 방법 중 하나로, 브라우저를 닫아도 데이터가 유지된다. 쿠키와는 달리 로컬스토리지는 웹 서버에 데이터를 전송하지 않고 클라이언트 측에서 데이터를 저장한다.

로컬스토리지는 키-값 쌍으로 데이터를 저장하며, 문자열 형태로만 저장할 수 있다. JSON.stringify()와 JSON.parse()를 사용하여 객체를 문자열로 변환하거나 문자열을 객체로 변환하여 사용할 수 있다. 브라우저 콘솔에서 localStorage 객체를 통해 로컬스토리지에 접근할 수 있다.

로컬스토리지는 쿠키와는 달리 용량 제한이 크고, 보안 상 쿠키보다 안전하다. 또한 HTTP 요청 시 서버로 전송되지 않기 때문에 네트워크 성능에도 이점이 있다. 하지만 데이터 수정이나 삭제는 자바스크립트를 사용하여 직접 수행해야 하기 때문에 쿠키보다는 사용이 까다로울 수 있다.

즉, 로컬 스토리지는 웹 브라우저의 저장소이고 따로 삭제하는 명령이 없는 한 계속 유지된다. 키-문자열 스토리지이고 요청시마다 쿠키처럼 전송되지는 않는다.

세션 스토리지

세션 스토리지(session storage)는 클라이언트 측 웹 스토리지 기술 중 하나로, 로컬 스토리지와 마찬가지로 웹 브라우저에 데이터를 저장하는 방법 중 하나이다. 하지만 로컬 스토리지와는 다르게 데이터가 페이지 세션(session) 동안에만 유지된다.

페이지 세션이란 사용자가 웹 사이트에 접속하는 시점부터 브라우저 창을 닫거나 탭을 종료할 때까지의 기간을 의미한다. 따라서 세션 스토리지에 저장된 데이터는 브라우저를 닫거나 탭을 닫으면 삭제된다. 브라우저를 종료하지 않고도 세션 스토리지를 비우는 방법은 있지만, 일반적으로는 페이지를 닫는 등의 사용자 행동으로 인해 세션 스토리지가 비워진다.

세션 스토리지는 로컬 스토리지와 마찬가지로 key-value 쌍으로 데이터를 저장한다. 저장된 데이터는 모든 창과 탭에서 공유되며, 한 탭이나 창에서 데이터를 변경하면 다른 모든 창과 탭에서도 변경된 데이터를 볼 수 있다.

세션 스토리지는 보안 측면에서 로컬 스토리지보다 좋다. 왜냐하면 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 자동으로 삭제되기 때문이다. 따라서 세션 스토리지에 중요한 데이터를 저장하면, 사용자가 로그아웃하거나 브라우저를 닫으면 데이터가 자동으로 삭제되므로 보안상 이점이 있다.

즉, 세션 스토리지는 로컬 스토리지와 거의 같지만 페이지 세션동안에만 유지된다.

결론

쿠키: 클라이언트 저장, 클라이언트 서버 둘 다 저장 가능, 요청, 응답 시마다 함께 전송
세션: 서버 저장, 서버만 저장 가능, 요청 시 클라이언트가 식별자를 붙여야 함
로컬 스토리지: 클라이언트 저장, 요청에는 포함안됨, 명령 있기 전까지는 계속 저장
세션 스토리지: 클라이언트 저장, 요청에는 포함안됨, 해당 탭이 유지되는 동안만 임시 저장

profile
Frontend Developer

0개의 댓글