[Javascript] Cookies, Session And Web Storage의 차이점

 
쿠키(Cookies), 세션(Session), 그리고 웹 스토리지(Web Storage)는 모두 웹 개발에서 데이터를 저장하고 관리하는 데 사용되는 기술이지만, 각각의 특징과 작동 방식이 다릅니다. 간단한 예제를 보면서 이들의 차이를 설명하겠습니다.
 

	쿠키	세션	웹 스토리지
저장 위치	클라이언트	서버	클라이언트
데이터 저장 방식	키-값 쌍 형태의 작은 텍스트 파일	서버 측에 사용자 세션 데이터를 저장하고, 클라이언트는 세션 ID를 사용하여 서버의 데이터에 접근	키-값 쌍으로 데이터를 저장하며, 로컬 스토리지와 세션 스토리지 두 가지 유형 존재
데이터 전송	모든 HTTP 요청과 함께 서버로 자동으로 전송	세션 ID가 클라이언트로 전송되지만, 세션 데이터는 서버에 저장되므로 클라이언트와 서버간의 통신을 통해 사용	데이터는 클라이언트에서만 사용되며, 서버와의 통신 없이 클라이언트에서 데이터를 관리
보안	일반적으로 쉽게 열람 가능하므로 민감한 데이터에는 사용되지 않을 수 있으며, 보안 옵션 설정이 가능	상대적으로 안전하며, 서버에 민감한 데이터를 저장할 때 사용	일반적으로 쿠키보다는 안전하지만, 민감한 데이터에는 추가 보안 조치가 필요
저장 기간	설정한 만료 날짜 또는 브라우저 세션 종료 시까지 유지	클라이언트 세션 종료 또는 세션 타임아웃까지 유지	로컬 스토리지는 사용자가 삭제하기 전까지 영구적으로 유지되고, 세션 스토리지는 세션 종료시까지 유지
사용 사례	사용자 식별, 로그인 상태 유지, 사용자 설정 등	로그인 상태 유지, 장바구니, 웹 애플리케이션 상태 관리	사용자 설정, 캐싱, 오프라인 작업, 로컬 데이터 저장

 
 

쿠키(Cookies)

쿠키는 클라이언트 측에 저장되는 작은 텍스트 파일로, 서버로 데이터를 전송하기 위해 HTTP 요청과 함께 보내집니다. 주로 사용자를 식별하고 상태 정보를 저장하는 데 사용됩니다. 아래 코드는 쿠키를 사용하여 로그인 정보를 유지하는 예제입니다.

// 서버에서 로그인 후 쿠키 설정 (예: Express.js)
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());
app.get('/login', (req, res) => {
    // 사용자 로그인 후 쿠키 설정
    res.cookie('user_id', '123', { httpOnly: true });
    res.send('로그인 성공');
});

 
쿠키를 사용하여 사용자를 로그인 상태로 유지할 수 있습니다. 사용자가 로그인하면 서버는 'user_id' 라는 쿠키를 생성하고 클라이언트에 전송합니다. 그러면 클라이언트가 이 쿠키를 저장하고 서버로 전송하여 사용자를 식별합니다.
 
 

세션(Session)

세션은 서버 측에서 사용자 상태를 유지하는 데 사용됩니다. 클라이언트는 세션 ID를 받아 로컬로 저장하고, 이 ID를 사용하여 서버의 세션 데이터에 액세스 합니다. 아래 코드는 세션을 사용하여 로그인 정보를 유지하는 예제입니다.

// 서버에서 세션 사용 (예: Node.js와 Express.js)
const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
    secret: 'mysecret',
    resave: false,
    saveUninitialized: true
}));

app.get('/login', (req, res) => {
    // 사용자 로그인 후 세션에 사용자 정보 저장
    req.session.user = { id: '123', username: 'user123' };
    res.send('로그인 성공');
});

 
세션을 사용하여 사용자 정보를 서버 측에서 안전하게 저장하고, 클라이언트는 세션 ID를 받아 로컬로 저장합니다. 클라이언트의 로그인 상태를 식별하기 위해 세션 ID를 사용합니다.
 
 

웹 스토리지(Web Storage)

웹 스토리지는 클라이언트 측에서 데이터를 저장하는 데 사용됩니다. 데이터는 브라우저에 저장되며, 클라이언트와 서버 간의 통신 없이도 데이터를 저장 및 검색할 수 있습니다.

• 간편성: 쿠키 및 세션에 비해 사용이 간편합니다. 데이터를 저장하고 검색하는 과정이 쿠키, 세션보다 단순했습니다.
• 로컬 데이터 저장: 클라이언트 측에 데이터를 로컬로 저장하므로, 서버에 데이터를 요청하지 않고도 로컬에서 데이터를 빠르게 로드할 수 있습니다. 이것을 잘 이용한다면 웹 애플리케이션의 성능을 향상 시킬 수 있습니다.
• 로그인 상태 유지: 쿠키에서도 물론 가능하지만, 웹 스토리지도 가능합니다.
• 오프라인 액세스: 웹 스토리지를 사용하여 애플리케이션 데이터를 로컬에 저장하면, 사용자가 오프라인 상태에서도 애플리케이션을 사용할 수 있습니다. 이는 오프라인 기능이 있는 경우 유용합니다.
• 캐싱: 웹 스토리지를 사용하여 웹 페이지의 자주 변경되지 않는 데이터를 캐싱할 수 있습니다. 이로써 서버 요청을 줄이고 성능을 향상시킬 수 있습니다.
• 보안 고려 사항: 쿠키는 브라우저에서 수정 가능하므로 민감한 정보를 저장하기에는 적합하지 않을 수 있습니다. 웹 스토리지는 클라이언트 측에서 데이터를 저장하는 데, 민감한 정보를 저장할 때 더욱 안전하다고 여겨질 수 있습니다.

 
이러한 웹 스토리지는 로컬 스토리지와 세션 스토리지가 있습니다. 로컬 스토리지와 세션 스토리지는 웹 브라우저에서 클라이언트 측 데이터를 저장하는 데 사용되는 두 가지 웹 스토리지 옵션입니다. 이들의 주요 차이점은 다음과 같습니다

- 데이터 수명
• 로컬 스토리지: 로컬 스토리지에 저장된 데이터는 사용자가 명시적으로 삭제하지 않는 한 영구적으로 보존됩니다. 즉, 브라우저를 종료하거나 재시작해도 데이터는 유지됩니다.
• 세션 스토리지: 세션 스토리지에 저장된 데이터는 현재 세션이 유지되는 동안만 유효합니다. 브라우저를 종료하면 세션 스토리지에 저장된 데이터가 삭제됩니다.

- 공유 범위
• 로컬 스토리지: 로컬 스토리지에 저장된 데이터는 동일한 도메인의 모든 페이지에서 공유됩니다. 다른 탭 또는 창에서도 접근 가능합니다.
• 세션 스토리지: 세션 스토리지에 저장된 데이터는 현재 탭 또는 창에서만 접근 가능하며 다른 탭 또는 창에서는 공유되지 않습니다.

- 사용 사례
• 로컬 스토리지: 로그인 정보, 사용자 설정, 장바구니 내역과 같이 영구적인 데이터를 저장하는 데 적합합니다.
• 세션 스토리지: 임시 데이터, 현재 세션에 관련된 데이터, 탭 간 데이터 공유가 필요하지 않을 때 사용됩니다.

아래 코드는 웹 스토리지를 사용하여 로그인 정보를 저장하는 예제입니다. 정말 간단하죠..?

// 클라이언트 측에서 로컬 스토리지 사용
localStorage.setItem('user_id', '123');

 
웹 스토리지를 사용하여 사용자 정보를 클라이언트 브라우저에 저장합니다. 데이터는 클라이언트 측에서만 사용되며, 서버로 전송되지 않습니다. 사용자 로그인 정보는 브라우저 내에 안전하게 저장됩니다.
 

[정리]
요약하면, 쿠키는 클라이언트 측에 저장되고 서버로 전송되며, 세션은 서버 측에서 데이터를 관리하고 클라이언트 세션 ID를 사용하여 서버와 상호 작용합니다. 웹 스토리지는 클라이언트 측에서 데이터를 저장하며 클라이언트와 서버 간의 통신 없이 데이터를 관리합니다. 선택은 사용 사례, 보안 및 데이터 저장기간에 따라 다르다고 생각이 듭니다.
 
저는 가장 최근에 작업한 프로젝트에서 로그인을 구현할 때 웹 스토리지를 이용했습니다. 쿠키, 세션보다 훨씬 간편했고 클라이언트측에 데이터를 저장하는 것 중 하나인 쿠키나 웹스토리지로 작업을 하고 싶었습니다. 보안을 비교해 보니 쿠키보다 웹스토리지가 더 안전하더라고요. 쿠키는 모든 HTTP 요청과 함께 서버로 자동으로 전송이 되기도 하고, 사용자가 쿠키를 직접 볼 수도 있고 쿠키를 조작하거나 삭제할 수 있습니다. 반면 웹 스토리지는 이러한 쿠키보다 더 많은 보안 옵션을 제공합니다. 로컬 스토리지와 세션 스토리지는 동일 출처 정책(Same-Origin Policy)을 준수하며, Javascript로만 액세스할 수 있습니다. 또한, 쿠키는 설정한 만료날짜까지만 유지되거나 브라우저 세션 동안만 유지되지만, 웹 스토리지는 영구적으로 저장할 수 있는 로컬 스토리지가 제공됩니다. 이러한 이유들 때문에 저는 쿠키대신 웹 스토리지를 선택하였습니다.