y_flm's Blog

먼저 쿠키 / 세션 / 로컬 스토리지는 왜 쓰는 걸까?

간단히 말하자면 웹 브라우저(클라이언트)와 서버가 데이터를 주고 받기 위해서는 HTTP 프로토콜을 사용한다. 

HTTP는 무상태성의 특징을 갖는데, 이는 서버가 클라이언트의 이전 요청을 기억하지 않는다는 특징이다.

예를 들어 로그인 정보같은 것을 기억하지 못하기 때문에 페이지 이동 시에도 매번 로그인을 해야한다.

이러한 문제를 해결하기 위해 쿠키 / 세션 / 로컬 스토리지를 사용한다.

[HTTP에 대해 더 알고 싶다면 아래 글을 참고!]⤵️

https://y-flm.tistory.com/81

쿠키(Cookie)란?

    작은 데이터 조각을 브라우저에 저장하는 방식으로, 클라이언트에 저장되지만 매 요청마다 서버로 자동 전송된다.

[쿠키의 특징]

* JS에서 쿠키를 확인하려면 document.cookie를 이용해 확인할 수 있다.

세션(Session)이란?

   서버에 저장되는 유저 상태 정보로, 브라우저에는 세션 ID만 저장되며 실제 데이터는 서버 메모리나 DB에 저장된다.

[세션의 특징]

* JS에서 세션을 확인하려면 window.sessionStorage를 이용해 확인할 수 있다.

로컬 스토리지(Local Storage)란?

   브라우저에 key-value 형태로 데이터 저장하는 HTML5 기술로, 서버로 자동 전송되지 않는다.

[로컬스토리지 특징]

* JS에서 로컬 스토리지를 확인하려면 window.localStorage를 이용해 확인할 수 있다.

* 로컬 스토리지에 값을 설정하거나 값을 가져오려면 아래와 같은 코드로 수행할 수 있다.

// 'theme'이라는 key에 'dark'라는 value를 저장
localStorage.setItem('theme', 'dark');

// 'theme'이라는 키에 저장된 값을 theme 변수에 저장
const theme = localStorage.getItem('theme');  // 'dark'

차이점 요약 🔍

차이점을 보고 대략적으로 언제 사용하면 좋을지 아래와 같이 정리해보았다.