쿠키, 세션, 웹스토리지

🍪 쿠키 (Cookie)

• 정의 : 서버가 사용자의 브라우저에 저장하는 작은 데이터 파일.

• 주요 목적 : 사용자의 상태를 유지하거나 개인화된 경험 제공.
  (예 : 로그인 정보, 장바구니)

• 특징

1. 클라이언트(브라우저)에 저장되며,
   동일한 사이트 재접속 시 서버에 자동 전송된다.
2. 만료 기한을 설정할 수 있고, 설정된 기한이 지나면 자동 삭제된다.
3. 용량은 각 쿠키 당 4KB로 제한.
4. 잠재적 보안 이슈로, HTTPOnly 및 Secure 속성으로 보안 강화 가능.

• 사용 예 : 로그인 상태 유지, 광고 타켓팅, 방문자 추적

---

⛳ 세션 (Session)

• 정의 : 서버 측에서 특정 사용자의 상태나 정보를 유지하는
  임시 저장 공간.

• 주요 목적 : 사용자가 웹사이트를 탐색하는 동안 상태를 유지한다.
  (예 : 로그인 여부)

• 특징

1. 브라우저를 닫거나 일정 시간이 지나면 세션이 만료된다.
2. 주로 서버에 저장되며,
   세션 ID만 클라이언트 쿠키에 저장해 서버와 연결.
3. 데이터가 서버에 저장되므로 보안성이 높다.

• 사용 예 : 로그인 처리, 장바구니 정보 저장 (세션 만료 시 초기화)

---

🚠 웹스토리지 (Web Storage)

HTML5에서 도입된 클라이언트 측 데이터 저장 방식으로,
로컬 스토리지와 세션 스토리지 두 가지 종류가 있다.

🟢 로컬 스토리지 (Local Storage)

• 정의 : 클라이언트 측에서 데이터를 영구적으로 저장.
  (사용자가 명시적으로 삭제할 때까지 유지)

• 특징

1. 도메인 단위로 구분, 페이지 새로고침하거나 브라우저를 닫아도 유지.
2. 저장 용량은 쿠키보다 크다. (일반적으로 도메인당 5~10MB)

• 사용 예 : 다크 모드 설정, 자동 로그인 설정 등 지속적인 데이터 저장.

🟢 세션 스토리지 (Session Storage)

• 정의 : 클라이언트 측에서 데이터를 임시로 저장,
  브라우저 탭이나 창을 닫으면 데이터가 삭제된다.

• 특징

1. 페이지 새로고침 시에도 유지되지만, 탭을 닫으면 데이터가 사라진다.
2. 같은 도메인이라도 탭마다 독립적인 세션 스토리지를 가진다.

• 사용 예 : 현재 탭에서만 유효한 폼 데이터나 UI 상태 저장.

---

---

🍪 쿠키 사용법

• JavaScript 예제

🖥️
// 쿠키 설정하기 (만료일 설정 포함)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 23:59:59 GMT; path=/";

// 쿠키 가져오기
console.log(document.cookire);

// 특정 쿠키 값 파싱하기
function getCookie(name) {
  let cookieArr = document.cookie.split('; ');
  for (let cookie of cookieArr) {
    let [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookiet("username"));

// 쿠키 삭제하기
document.coookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

1. 서버가 HTTP 응답 시 쿠키를 설정하고 클라이언트의 브라우저에 저장
2. 이후 같은 도메인으로의 요청이 발생하면, 브라우저는 해당 쿠키를 자동으로 서버에 전송
3. 서버는 쿠키 정보를 사용해 사용자를 식별하거나 상태를 유지

---

⛳ 세션 사용법

• Node.js 예제

🖥️
const express = require('express');
const session = require('session');

const app = express();
app.use(session({
  secret: 'secret-key', // 세션 암호화에 사용될 키
  resave: false, // 세션이 수정되지 않아도 저장할지 여부
  saveUnintialized: true, // 초기화되지 않은 세션도 저장할지 여부
}));

// 세션에 데이터 저장
app.get('/login', (req, res) => {
  req.session.username = 'JohnDoe';
  res.send('Logged in!');
})

// 세션 데이터 접근
app.get('profile/', (req, res) => {
  if (req.session.username) {
    res.send(`Welcome, ${req.session.username}!`);
  } else {
    res.send('Please log in.');
  }
});

// 세션 종료
app.get('/logout', (req, res) => {
  req.session.destroy(() => {
    res.send('Logged out!');
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

1. 사용자가 로그인하면 서버는 세션 ID를 생성해 클라이언트에 전송
2. 이 세션 ID는 주로 쿠키에 저장되며,
   서버에서는 해당 세션 ID에 사용자의 데이터를 매핑
3. 서버는 세션을 통해서 사용자의 로그인 상태나 임시 데이터를 유지한다.
4. 사용자가 로그아웃하거나 일정 시간이 지나면 세션 만료

---

🚠 로컬 스토리지 사용법

• JavaScript 예제

🖥️
// 데이터 저장하기
localStorage.setItem('username', 'JohnDoe');

// 데이터 가져오기
let username = localStorage.getItem('usename');
console.log(username); // "JohnDoe"

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

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

1. 브라우제어 데이터를 영구적으로 저장하며,
   사용자가 직접 삭제하지 않는 한 데이터가 유지된다.
2. 각 도메인마다 독립적인 로컬스토리지를 가지며, 다른 도메인에서 접근 불가
3. 페이지를 새로고침하거나 브라우저를 닫아도 데이터 유지

---

🚠 세션 스토리지 사용법

• JavaScript 예제

🖥️
// 데이터 저장하기
sessionStorage.setItem('sessionKey', 'someValue');

// 데이터 가져오기
let sessionData = sessionStorage.getItem('sessionKey');
console.log(sessionData);

// 데이터 삭제하기
sessionStorage.removeItem('sessionKey');

// 모든 데이터 삭제하기
sessionStorage.clear();

1. 세션 스토리지는 브라우저 탭 또는 창에 데이터를 임시로 저장한다.
2. 탭을 새로 열면 새로운 세션 스토리지가 생성되고,
   기존 탭과는 독립적으로 동작한다.
3. 브라우저 탭이나 창을 닫으면 해당 세션 스토리지 데이터는 사라진다.
4. 같은 도메인이라도 탭마다 서로 다른 세션 스토리지를 가진다.

---

🟢 주의점

• 쿠키 : 민감한 정보는 저장하지 말고, 항상 secure 및 HTTPOnly 옵션을 사용해 보안을 강화해야 한다.
• 세션 : 서버에 저장하므로 로그인 상태를 안전하게 유지하지만,
  서버의 리소스를 많이 사용할 수 있다.
• 로컬 스토리지 : 브라우저에 영구적으로 남기 때문에, 민감한 정보 저장 시 암호화를 고려해야 한다.
• 세션 스토리지 : 임시 데이터 저장에 유용하지만, 탭을 닫으면 사라지므로 지속성을 필요로 하는 데이터에는 부적합