JavaScript 기초 <19. 로컬스토리지 vs 세션스토리지 vs 쿠키 (차이점과 활용법)>

자바스크립트 JavaScript

19. 로컬스토리지 vs 세션스토리지 vs 쿠키 (차이점과 활용법) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 웹 스토리지(Web Storage)란?

웹 스토리지는 브라우저에 데이터를 저장하는 기술로,
사용자의 데이터를 로컬에서 유지할 수 있도록 도와줍니다.
대표적으로 **로컬스토리지(LocalStorage), 세션스토리지(SessionStorage), 쿠키(Cookie)**가 있습니다.

📌 웹 스토리지를 활용하면 서버에 불필요한 요청 없이 데이터를 저장하고 관리할 수 있음!

---

 

2. 로컬스토리지, 세션스토리지, 쿠키 차이점

구분로컬스토리지(LocalStorage)세션스토리지(SessionStorage)쿠키(Cookie)

데이터 저장 기간	영구 저장	브라우저 종료 시 삭제	유효기간 설정 가능
데이터 용량	5MB 이상	5MB 이상	4KB 제한
서버 전송 여부	❌ 서버로 전송되지 않음	❌ 서버로 전송되지 않음	✅ 요청 시 자동으로 서버로 전송
보안	비교적 안전	비교적 안전	보안 취약 (HTTP 요청 시 전송)

📌 로컬스토리지는 데이터를 영구적으로 저장, 세션스토리지는 세션 종료 시 삭제, 쿠키는 서버와 함께 전송됨!

---

 

3. 로컬스토리지(LocalStorage) 사용법

✅ 1) 데이터 저장 (setItem)

localStorage.setItem("username", "Alice");

✅ 2) 데이터 가져오기 (getItem)

const username = localStorage.getItem("username");
console.log(username); // "Alice"

✅ 3) 데이터 삭제 (removeItem, clear)

localStorage.removeItem("username"); // 특정 데이터 삭제
localStorage.clear(); // 모든 데이터 삭제

📌 로컬스토리지는 브라우저를 닫아도 데이터가 유지됨!

---

✅ 여기까지 로컬스토리지, 세션스토리지, 쿠키의 차이를 배웠습니다!
👉 "그렇다면, 쿠키는 어떻게 설정하고 활용할 수 있을까?"
✅ 2부에서 쿠키의 설정, 보안, 서버와의 연동 방법까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 쿠키(Cookie)란?

쿠키는 사용자의 데이터를 작은 파일로 저장하고, 서버 요청 시 자동으로 전송되는 데이터 저장 방식입니다.
로그인 정보, 사용자 설정 값 등을 저장하는 데 주로 사용됩니다.

📌 쿠키는 서버와 함께 전송되므로 보안 설정이 중요함!

---

 

2. 쿠키 설정 및 활용 방법

✅ 1) JavaScript로 쿠키 설정 (document.cookie)

document.cookie = "username=Alice; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

✅ 2) 쿠키 값 가져오기 (document.cookie)

console.log(document.cookie); // "username=Alice"

✅ 3) 쿠키 삭제하기

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

📌 쿠키는 expires 속성을 설정하여 만료 날짜를 지정할 수 있음!

---

 

3. 쿠키 보안 강화 (HttpOnly, Secure, SameSite)

✅ 보안 설정 예제 (서버에서 설정하는 방법)

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

설정설명

HttpOnly	JavaScript에서 쿠키 접근 불가 (XSS 공격 방지)
Secure	HTTPS 환경에서만 쿠키 전송 가능
SameSite	CSRF 공격 방지 (Strict 또는 Lax 설정 가능)

📌 쿠키를 안전하게 사용하려면 HttpOnly, Secure, SameSite 속성을 활용해야 함!

---

 

✅ 지금까지 로컬스토리지, 세션스토리지, 쿠키의 차이점과 활용법을 상세히 배웠습니다!
👉 "그렇다면, 정규표현식(Regex)은 어떻게 활용할 수 있을까?"
✅ 다음 회차에서 정규표현식의 패턴과 실제 활용법을 배워봅시다! 🚀