#10. LocalStorage vs SessionStorage vs Cookie

오늘은 여러 종류의 브라우저 저장소들을 알아보는 시간을 가지려고 한다.

브라우저에서 데이터를 저장하고 관리하는 방법은 여러가지가 존재한다.

각 방식은 용도와 동작 방식, 보안 특성 면에서 차이가 존재한다.

 

 

 

---

 

 

 

 

LocalStorage

- HTML Web Storage API 의 한 부분

  > 브라우저에서 키-값 쌍으로 데이터를 저장할 수 있는 API의 한 부분

- 동일 출처(same-origin) 내에서 지속적인 데이터 저장소

  > 프로토콜(https://), 도메인(www.example.com), 포트(80, 443 등)가 모두 동일한 경우
  > https://www.example.com:443/page1와 https://www.example.com:443/page2는 동일 출처
  > http://www.example.com과 https://www.example.com은 프로토콜이 다르므로 다른 출처로 취급됨

 

- 브라우저나 탭 종료되어도 데이터는 남아있음 

- 사용자가 명시적 삭제 전까지 지속

- 보통 5MB 정도 용량 제공 (브라우저마다 다름)

- 동기 방식으로 동작

- localStorage.getItem(), setItem(), removeItem() 사용하여 데이터 처리

- 캐싱, 사용자 선호도 저장(비민감 정보), 오프라인 지원 데이터 등 서버와 상호 작용 없이 클라이언트에서 빠르게 접근할 수 있는 데이터 저장할 때 유용

 

 

 

 

 

// 사용자 테마 저장 예제
const userTheme = 'dark';
localStorage.setItem('theme', userTheme);

// 페이지 로드 시 테마 적용
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.body.classList.add(savedTheme);
}

 

 

 

 

 

SessionStorage

- LocalStorage와 유사하지만, 탭 또는 브라우저 창 단위의 저장소로 동작

- 브라우저 완전 종료되면 자동 삭제되며, 동일 탭 내에서 페이지를 새로고침해도 유지

- 보통 약 5MB이나 브라우저마다 구현 방식에 차이있음

- LocalStorage와 동일한 동기 API 제공

- 스코프가 세션 단위(현재 브라우저 탭 또는 창이 열려있는 동안)로 제한

- 일회성 폼 데이터(로그인 상태), 탭 전용 데이터(일시적 상태 데이터), 단기 세션 관리(페이지 간 임시 데이터 전달) 등 세션 동안에만 필요하고, 브라우저 종료 시 삭제되어도 되는 데이터에 적합

- 한 탭에서 새로고침이나 같은 탭 내 페이지 이동 시에는 데이터가 유지되지만, 해당 탭이나 창을 닫으면 데이터가 삭제

- 각 탭은 독립된 세션

 

 

// 사용자가 입력한 데이터 임시 저장
const formData = { name: 'John Doe', email: 'john@example.com' };
sessionStorage.setItem('formData', JSON.stringify(formData));

// 폼 복구
const savedData = sessionStorage.getItem('formData');
if (savedData) {
  const parsedData = JSON.parse(savedData);
  document.getElementById('name').value = parsedData.name;
  document.getElementById('email').value = parsedData.email;
}

 

 

 

 

 

 

 

 

localStorage와 sessionStorage의 두 속성이 비슷해보이는데, 무슨 차이나 이유로 사용처를 달리하는지?

차이점:
1. 데이터 지속성:
  - localStorage: 브라우저를 종료해도 데이터가 남아있어 장기 저장에 적합합니다.
  - sessionStorage: 현재 세션(탭/창) 동안만 데이터가 유지되어 일시적 정보 저장에 적합합니다.

2. 사용 범위:
  - localStorage: 동일 출처 내 모든 탭과 창에서 데이터 공유 가능
  - sessionStorage: 단일 탭(세션) 내에서만 접근 가능하여 탭 간 데이터 간섭을 막습니다.

3. 사용처의 차이:
  - 장기 캐싱 및 사용자 설정: localStorage
  - 일회성 폼 데이터, 임시 상태 정보: sessionStorage

 

 

 

 

( LocalStorage & SessionStorage )
성능 측면 보완 실제 사용 사례가 뭐가 있을까?

 

 

 

대용량 데이터 저장 시 UI 응답성 고려
두 저장소 모두 동기 API를 사용하기 때문에, 많은 데이터를 한 번에 읽거나 쓸 경우 메인 스레드를 차단할 수 있습니다. 

이를 해결하기 위해 데이터 분할 저장이나, Web Worker를 사용해 비동기 처리를 고려할 수 있습니다.

// 예시: Web Worker를 활용하여 대용량 데이터 처리
// main.js
const worker = new Worker('dataWorker.js');
worker.postMessage({ type: 'saveData', data: largeData });
worker.onmessage = (e) => {
  console.log('데이터 저장 완료', e.data);
};

 

// dataWorker.js
self.onmessage = (e) => {
  if (e.data.type === 'saveData') {
    // 대용량 데이터 처리
    localStorage.setItem('largeData', JSON.stringify(e.data.data));
    self.postMessage('success');
  }
};

쿠키 사용 시 네트워크 트래픽 최소화:
쿠키는 HTTP 요청마다 전송되므로, 쿠키에 저장하는 데이터는 반드시 필요한 최소한의 정보로 제한해야 합니다. 예를 들어, 세션 ID와 인증 토큰 등만 포함하고, 사용자가 직접 참조할 필요 없는 정보는 로컬 저장소(예: localStorage)에 보관할 수 있습니다.

 

 

Cookie

- Http 요청 / 응답과 함께 전송되는 데이터 조각

- 클라이언트와 서버 간 상태 정보 관리에 사용

- 쿠키 생성 시 만료 기간 (Expires 또는 Max-Age) 지정 가능

- 세션 쿠키는 브라우저 종료 시 삭제

- 약 4KB 크기

- 도메인당 저장 가능 쿠키 수와 크기에 제약

- HTTP 요청 시마다 자동으로 서버로 전송 (불필요 트래픽 증가 유발)

- HttpOnly: 자바스크립트를 통해 접근할 수 없게 하여 XSS 공격 완화

- Secure: HTTPS 연결에서만 전송, 중간자 공격(MITM) 보안성 높임

- SameSite: CSRF 공격 예방 위해 쿠키 전송 제한 가능

- 인증 및 세션 관리(인증, 토큰, 세션 식별자), 서버 사이드 렌더링(서버에서 클라이언트 상태 읽어와야 하는 경우;Cookie 헤더를 서버가 읽어 사용자 인증 상태나 선호 설정 등을 파악), 사용자 상태 추적 등 서버와의 통신에서 상태 유지에 주로 사용

쿠키는 HTTP 요청마다 전송되므로, 쿠키에 저장하는 데이터는 반드시 필요한 최소한의 정보로 제한해야 합니다.
예를 들어, 세션 ID와 인증 토큰 등만 포함하고, 사용자가 직접 참조할 필요 없는 정보는 로컬 저장소(예: localStorage)에 보관할 수 있습니다.

HTML Web Storage API는 브라우저에서 키-값 쌍으로 데이터를 저장할 수 있는 API입니다.

 

클라이언트와 서버 간 상태 정보 관리에 관련한 예시

HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict; Max-Age=3600
Content-Type: text/html​

 

 

 

 

세션 쿠키와 일반 쿠키는 다른거야?, 브라우저 종료라면 탭 종료에는 유지되는거야?

세션 쿠키 vs. 일반(지속) 쿠키:
  - 세션 쿠키:
    > 만료 시간을 지정하지 않은 쿠키로, 브라우저 전체가 종료되면 삭제됩니다.
    > 탭 종료: 단순히 탭을 닫는 것은 브라우저 전체 종료와 다르므로, 동일한 브라우저 내 다른 탭이나 창에서는 여전히 유지

  - 지속 쿠키:
    > 만료 시간(Expires 또는 Max-Age)을 지정한 쿠키로, 브라우저가 종료되어도 만료 시간까지 유지


즉: 브라우저 전체 종료 시에만 세션 쿠키가 삭제되며, 탭만 닫는 경우에는 세션이 유지

 

 

 

 

 

HttpOnly, Secure, SameSite 해당 기능은 라이브러리 사용해야 하나?

1. 설정 방식
  - 이 옵션들은 주로 서버 측에서 응답 헤더를 통해 설정
  - Node.js의 express, Java의 Spring, Python의 Django 등과 같은 웹 프레임워크는 쿠키 옵션을 쉽게 설정할 수 있도록 API를 제공

2. 라이브러리 사용
  - 꼭 별도의 라이브러리를 사용할 필요는 없으나, 보안 설정을 쉽게 관리하기 위해 쿠키 관리 라이브러리
(예: cookie-parser in Express)를 사용하는 것이 일반적
  - 클라이언트 측에서는 HttpOnly 쿠키에 접근할 수 없으므로, 주로 서버 측 설정이 핵심

 

 

 

 

 

 

 

비교

특성	LocalStorage	SessionStorage	Cookie
데이터 수명	명시적 삭제 전까지 지속	탭/브라우저 창 종료 시 삭제	만료기간 설정에 따라 지속 (세션 쿠키는 임시)
저장 용량	대략 5MB (브라우저별 차이)	대략 5MB (브라우저별 차이)	약 4KB, 도메인당 저장 가능 쿠키 수 제한
전송 방식	자바스크립트를 통해 접근,  HTTP 요청과 분리	자바스크립트를 통해 접근,  HTTP 요청과 분리	HTTP 요청 시 자동 전송
API 접근성	간단한 key-value API (동기적)	간단한 key-value API (동기적)	document.cookie를 통해 접근, 파싱 필요
보안 이슈	XSS 취약성 존재 (직접 조작 가능) - 민감한 정보를 클라이언트 측 저장할 때	XSS 취약성 존재 (직접 조작 가능) - 민감한 정보를 클라이언트 측 저장할 때	XSS, CSRF, 도메인/경로 제한 및 보안 속성 사용 가능 - HttpOnly, Secure, SameSite 등의 옵션
용도	영속성	세션 단위 데이터 보관	서버와의 통신에서 상태 유지 필요한 경우
보안 고려	민감 정보를 저장하는 것은 피해야 함	민감 정보를 저장하는 것은 피해야 함	HttpOnly, Secure, SameSite 옵션을 적절히 활용
용량과 성능	동기 API 특성상 대량 데이터 읽기/쓰기가 UI 응답에 영향 가능	동기 API 특성상 대량 데이터 읽기/쓰기가 UI 응답에 영향 가능	TTP 요청마다 전송되므로 네트워크 부하 가능

 

 

 

 

[ 보안 및 취약점 ]

Cookie는 

• HTTP 요청마다 전송되므로, 
• 데이터가 커지면 네트워크 트래픽과 성능 저하를 유발할 수 있으며, 
• 서버 부하를 증가시킵니다.

XSS (Cross-Site Scripting)

• LocalStorage와 SessionStorage에 저장된 데이터는 자바스크립트로 접근 가능하기 때문에,
• 악의적인 스크립트가 삽입되면 민감한 정보가 유출될 수 있습니다.

CSRF (Cross-Site Request Forgery)

• 쿠키는 서버와의 통신에서 자동으로 포함되기 때문에, CSRF 공격에 노출될 수 있습니다.
• 이를 방지하기 위해 SameSite 속성 및 CSRF 토큰 등을 활용해야 합니다.

HttpOnly와 Secure 속성

• 쿠키에 설정하여 클라이언트 측 스크립트에서 접근하지 못하게 하거나,
• HTTPS를 통해서만 전송되도록 할 수 있으며,
• 이는 보안 강화를 위한 중요한 방법입니다.

 

 

 

 

 

[ 데이터 동기화 및 공유 범위 ] 

 

LocalStorage

• 동일 출처 내의 모든 탭과 창에서 공유됩니다.
• 단, 여러 탭 간에 동시에 접근할 경우 데이터 충돌 및 race condition
  (여러 스크립트나 탭이 동시에 같은 자원에 접근하여 읽기/쓰기 작업을 수행할 때, 실행 순서에 따라 예기치 않은 결과가 발생하는 상황) 문제가 발생할 수 있으므로,
• 이벤트 리스너(storage 이벤트)를 통해 동기화 상태를 관리할 필요가 있습니다.

 

 

SessionStorage

• 동일 탭 내에서만 공유되며,
• 새 탭을 열면 별도의 스토리지 영역이 생성됩니다.
• 따라서 탭 간 상태 공유가 필요한 경우에는 적합하지 않습니다.

 

 

Cookie

• 특정 도메인 및 경로에 바인딩되어 동작하므로,
• 여러 하위 도메인 간 공유할 수 있도록 Domain 속성을 설정할 수 있으나,
• 기본적으로는 서버와 클라이언트 모두에서 접근이 가능합니다.

 

 

 

 

 

 

 

[ 데이터 직렬화 ]

LocalStorage와 SessionStorage는

• 문자열 기반의 저장소이므로,
• 객체나 배열을 저장하려면 JSON.stringify()와 JSON.parse()를 이용하여
• 직렬화 및 역직렬화 처리가 필요합니다.

Cookie

• 역시 문자열로 저장되며,
• 복잡한 데이터를 저장하기 위해서는
• 직렬화와 별도의 파싱 로직이 필요합니다.