[HTML] local storage, session storage, cookie

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ local storage

로컬 스토리지(local storage)는 웹 스토리지(web storage)의 한 종류로 데이터를 브라우저 상에 저장할 수 있다.

로컬 스토리지는 세션 스토리지와 달리 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않으며 여러 탭이나 창 간에 데이터가 서로 공유된다.

이러한 점은 동일한 컴퓨터에서 동일한 브라우저를 사용할 때에만 해당된다.

 

 

✅ session storage

세션 스토리지(session storage)는 웹 스토리지의 나머지 한 종류로 로컬 스토리지와 마찬가지로 데이터를 브라우저 상에 저장할 수 있다.

세션 스토리지는 세션이 끝날 때 저장된 데이터가 지워진다.

즉, 브라우저에서 같은 웹 사이트를 여러 탭이나 창으로 띄우면 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며 각 탭이나 창이 닫힐 때 데이터가 소멸된다.

 

 

✅ cookie

HTTP 쿠키(HTTP cookie, web cookie, browser cookie)는 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각이다.

브라우저는 쿠키를 저장하고 나중에 요청하면 동일한 서버로 다시 보낼 수 있다.

일반적으로 HTTP 쿠키는 두 개의 요청이 동일한 브라우저에서 오는지 여부를 알려주는데 사용된다.

 

쿠키는 주로 다음의 목적으로 사용된다.

• 세션 관리 : 로그인, 장바구니 등.
• 개인화 : 사용자 기본 설정, 테마 및 기타 설정.
• 추적 : 사용자 행동 기록 및 분석.

 

✅ 비교

local/session storage와 cookie 모두 클라이언트 상에서 key/value 쌍을 저장할 수 있다.

단, 이때 value는 반드시 문자열이어야 한다.

또한 모두 동일 출처 정책(SOP)을 따르기 때문에 다른 도메인에서 접근할 수 없다.

 

	local storage	session storage	cookie
생성자	클라이언트	클라이언트	클라이언트 / 서버
지속 시간	명시적으로 지울 때까지	탭/창 닫을 때 까지	설정 여부에 따름
접근성	모든 윈도우	같은 탭	모든 윈도우
용량	5MB / 10MB	5MB	4KB
서버와의 통신	X	X	O
취약점	XSS 공격	XSS 공격	XSS / CSRF 공격

 

 

🔍 참조

로컬 스토리지 vs 세션 스토리지 https://www.daleseo.com/js-web-storage/

Using HTTP cookies https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

local and session storage https://tutorial.techaltum.com/local-and-session-storage.html