[CS/WEB] 쿠키, 세션 그리고 로컬스토리지

웹 애플리케이션에서 데이터를 저장하고 관리하는 것은 중요합니다.
이를 위해 주로 사용되는 3가지 방식인 쿠키, 세션, 로컬스토리지에 대해 알아보겠습니다.

 

1. 쿠키(Cookie)

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일입니다.

 

특징

• 용량 : 대략 4KB
• 만료 : 설정 가능 (만료일 없으면 세션 쿠키)
• 서버 접근 : 가능 (요청 시 자동으로 서버에 전송)
• 보안 : HttpOnly, Secure 플래그로 보안 강화 가능

 

주요 용도

• 사용자 로그인 상태 유지
• 사용자 선호 설정 저장
• 트래킹 및 광고

 

사용 예시

// 쿠키 설정
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 쿠키 읽기
let username = document.cookie.split(';').find(row => row.startsWith('username=')).split('=')[1];

// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

 

 

2. 세션(Session)

세션은 서버 측에서 유지되는 정보로, 클라이언트를 식별하는 데 사용됩니다.

 

특징

• 저장 위치 : 서버
• 용량 : 서버 설정에 따라 다름
• 만료 : 브라우저 종료 시 또는 서버 설정에 따라
• 보안 : 쿠키보다 안전 (중요 정보는 서버에 저장)

 

주요 용도

• 사용자 인증
• 장바구니 기능
• 사용자별 설정 유지

 

사용 예시 (Node.js + Express)

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'your secret key',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));

app.get('/', (req, res) => {
  if (req.session.views) {
    req.session.views++;
    res.send(`조회수: ${req.session.views}`);
  } else {
    req.session.views = 1;
    res.send('첫 방문을 환영합니다!');
  }
});

 

 

3. 로컬스토리지 (LocalStorage)

로컬스토리지는 HTML5에서 도입된 웹 스토리지 방식으로, 클라이언트 측에서 데이터를 영구적으로 저장합니다.

 

특징

• 용량 : 대략 5MB ~ 10MB (브라우저에 따라 다름)
• 만료 : 영구 (직접 삭제하기 전까지 유지)
• 서버 접근 : 불가능 (JavaScript를 통해서만 접근 가능)
• 도메인 제한 : 같은 도메인 내에서만 접근 가능

 

주요 용도

• 사용자 설정 저장
• 폼 데이터 자동 저장
• 오프라인 데이터 캐싱

 

사용 예시

// 데이터 저장
localStorage.setItem('username', 'John Doe');

// 데이터 읽기
let username = localStorage.getItem('username');

// 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();