[브라우저] 브라우저 저장소의 차이점 (Web Storage, Local Storage, Session Storage, Cookie)

브라우저 저장소

: 웹 애플리케이션에서 데이터를 저장하기 위한 방법

• 브라우저 저장소 - Web Storage, Cookie
• WebStorage - Local Storage, Session Storage

---

브라우저 저장소 - Web Storage, Cookie 

1️⃣웹 스토리지(Web Storage)

: 데이터를 클라이언트에 저장하기 위해 만들어진 ‘key : value’ 형식의 저장소

• HTML5에 포함되어 있는 스펙으로 기존의 저장소로 사용되었던 Cookie의 몇 가지 단점을 개선한 스펙이다.
• 스토리지는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않는다.
• 용량 제한이 쿠키에 비해 넉넉하다.
• 만료일자를 따로 정하지 않는다. (영구 / 비영구)
• 스토리지는 단순한 문자열을 넘어서 객체 정보를 저장할 수 있으므로 쿠키에 비해 개발 편의성이 증가한다.
• 오리진 단위로 접근이 제한되는 특성 덕분에 외부에서 값을 꺼내 쓸 수 없다. (CSRF)

*CSRF(교차 사이트 요청 위조 Cross-Site Request Forgery)

: 신뢰할 수 있는 사용자를 사칭해 웹 사이트에 원하지 않는 명령을 보내는 공격

 

2️⃣쿠키(Cookie)

: 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 ‘key : value’ 형식의 저장소

• 사용자가 웹 사이트에서 로그인 정보, 사용자 이름, 비밀번호 등을 저장하는 데 사용된다.
• 데이터가 클라이언트 브라우저에 저장된다.
• cookie를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송된다.
  → 서버와의 통신을 목적으로 만들어 졌기 때문에 쿠키에 쓸데없는 값이 많다면 그만큼 네트워크 트래픽이 증가한다
• 용량 제한 : 한 개의 쿠키당 약 4kb로 제한되어 있고, 총 개수는 300개, 하나의 도메인당 20개로 제한
• 만료 일자 : 만료일자를 설정하지 않으면 세션쿠키 / 설정하면 지속적쿠키로 간주 된다.
• 다른 도메인에서도 접근이 가능하므로 보안성이 낮다.

*세션쿠키 - 메모리에 저장되어 브라우저나, 탭이 닫히면 삭제

*지속적쿠키 - 디스크에 저장되어 만료일 전까지 영구 저장

---

WebStorage - Local Storage, Session Storage

: 데이터의 유지와 범위에서 차이가 있다.

 

1️⃣ Local Storage

영구적 / 브라우저 간 공유 o

• 일반적으로 ‘key : value’ 쌍으로 구조화된 방식으로 데이터를 저장한다.
• 브라우저를 종료해도 데이터를 브라우저 내부에 영구적으로 보관
• 도메인만 같으면 모든 브라우저 간에 전역적으로 데이터가 공유된다.
• 주로 사용자 설정(선호하는 테마, 언어), 로그인 정보 등과 같은 장기간 보관해야하는 정보를 저장하기에 적합하다.

 

2️⃣ Session Storage

비영구적 / 브라우저 간 공유 x

• 일반적으로 ‘key : value’ 쌍으로 구조화된 방식으로 데이터를 저장한다.
• 브라우저 세션이 유지되는 동안만 존재하기 때문에 브라우저가 종료되면 데이터가 삭제된다 (비영구적)
• 도메인이 같더라도 브라우저가 다르면 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않는다.
• 주로 사용자의 장바구니, 쇼핑 카트 등과 같은 일시적인 정보를 저장하기에 적합하다.
• 사용자가 웹 사이트를 다시 방문하면 새로운 세션이 시작되며, 이전 세션에서 저장된 데이터는 사용할 수 없다.

 

❗세션

: 클라이언트가 브라우저에 접속하여 서버와 접속이 종료하기 전의 상태 

: 사용자가 웹 브라우저를 열고 해당 브라우저를 종료할 때까지의 기간

• 세션은 서버에 저장되며, 각 클라이언트에 대한 고유 세션 ID를 통해 클라이언트를 식별한다.
• 이 고유 세션 ID는 쿠키를 통해 클라이언트에 저장되어 서버와의 통신에 사용된다.
• 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
• 데이터가 서버에 저장되기 때문에 서버 자원을 사용하며, 많은 사용자가 접속할 경우 서버 부담이 증가한다.
• 세션은 웹서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장한다.
• 브라우저를 닫거나 서버에서 세션을 삭제하면 세션이 삭제된다(비영구적)

 

❗JWT 토큰

Json Web Token

: 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다.

• 개인 정보나 다름 없기 때문에 저장장소를 잘 선정해야 한다.
• local storage에 저장하는 경우: CSRF 공격에는 안전하지만 XSS에 취약하다.
• cookie에 저장하는 경우: XSS 공격으로부터 local storage에 비해 안전하지만 완전히 안전한 것은 아니며, CSRF 공격에 취약하다.

 

✔ Best Option

• access token은 메모리에 저장한다 (localStorage나 cookies에 저장하는 것 대신에 access token을 variable에 넣는다.)
• refresh 토큰은 보안을 강화한 cookie에 저장한다 (httpOnly, sameSite, anti-CSRFtokens 등을 사용하여 보안을 강화한다.)

---

📶표로 정리

구분	local storage	session storage	cookie
저장 위치	클라이언트 브라우저	클라이언트 브라우저	클라이언트 브라우저
용량	5MB	5MB	4KB
만료시간	영구적	비영구적	만료기간을 설정할 수 있다.
서버 전송 여부	X	X	O
보안성	다른 도메인에서 접근 불가능	다른 도메인에서 접근 불가능	다른 도메인에서 접근 가능
사용 예시	로그인 정보, 사용자 설정 : 장기간 보관해야 하는 정보	장바구니, 쇼핑카트 : 일시적인 정보	사용자 행동 분석, 광고 : 서버와 연동하여 사용하는 정보

---

📄참조

https://junvelee.tistory.com/142

https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-4/web-storage.md

https://suzzeong.tistory.com/128