[Frontend] localStorage와 Cookies

목차 (OPEN)

• 💾 localStorate
• 🧩 개념 정리
• 🏃🏻‍♂️ 동작 방식
• 🔐 보안적 측면
• 📦 localStorage VS 쿠키
• 📚 결론

 

 

 

💾 localStorate

localStorage는 웹 브라우저가 제공하는 Web Storage API의 한 종류로,
키-값 형태의 데이터를 클라이언트 측에 영구적으로 저장할 수 있게 해준다.

 

---

🧩 개념 정리

📢 정의

localStorage는 웹 애플리케이션이 사용자의 브라우저에 데이터를 직접 저장하고, 유지할 수 있게 해주는 저장소이다.

 

🔓 비유

브라우저 안에 있는 열쇠 없는 사물함이라고 생각하면 된다.

언제든 꺼내 쓸 수 있지만, 보안이 허술하고 누구나 열 수 있다는 한계가 있다.

 

---

🏃🏻‍♂️ 동작 방식

1️⃣ 저장 가능한 위치와 조건

• localStorage는 도메인 별로 분리된 공간을 제공한다.
  예를 들어 https://example.com의 localStorage는 https://another.com 에서는 접근이 불가능하다.
• 브라우저마다, 사용자 계정마다 별도로 존재한다.

2️⃣ 데이터 저장과 읽기

// 저장
localStoarge.setItem("accessToken", "adfsdfoKDFJ...");

// 조회
const token = localStorage.getItem("accessToken");

// 삭제
localStorage.removeItem("accessToken");

// 전체 초기화
localStorage.clear();

 

이때, 문자열 (String) 형태로만 저장되기 때문에 객체를 저장하려면 아래와 같이 JSON 변환이 필요하다.

localStorage.setItem("user", JSON.stringify({ name: "soyeon" }));
const user = JSON.parse(localStorage.getItem("user"));

 

3️⃣ 데이터 지속성 (Persistence)

한 번 저장된 데이터는 페이지를 새로고침 하거나, 브라우저를 껐다 키거나, 다시 방문해도 유지된다.

이러한 특성 덕분에 localStorage는 로그인 상태 유지, 사용자 테마 (ex. 다크 모드), 마지막 위치 기억 등 사용자 경험 (UX)을 개선하는 데 매우 유용하게 사용된다.

 

4️⃣ 삭제 조건과 예외 상황

localStorage는 절대적으로 안전한 것은 아니고, 아래와 같은 조건에서 데이터는 언제든지 사라질 수 있다.

• 사용자가 개발자 도구 (F12)에서 직접 데이터를 삭제한 경우
• 브라우저의 설정에서 "캐시 및 사이트 데이터 삭제"를 수행한 경우
• 시크릿 모드(Incognito)에서 접속한 경우
  →  시크릿 모드 종료와 함께 저장된 모든 localStorage 데이터도 함께 사라진다.
• 웹 스토리지 용량 초과
  → 브라우저마다 도메인당 대략 5MB 제한이 있기 때문에 초과 시 예외가 발생한다.

 

---

🔐 보안적 측면

localStorage에 저장된 데이터는 위에서 봤듯이 JavaScript로 쉽게 접근이 가능하기 때문에

만약 악성 스크립트가 삽입되면 공격자가 토큰을 탈취하는 것이 가능해진다.

 

예를 들어 공격자가 댓글이나 검색창 등에 <script> 태그를 삽입해두면,

해당 페이지를 열자마자 JavaScript가 실행되고 localStorage에 접근해서

민감한 정보를 탈취한 후 외부 서버로 전송할 수도 있는 것이다.

 

따라서 민감한 정보 (Access Token, Refresh Token, 비밀번호 등)는 localStorage에 저장하지 않는 것이 원칙이다.

만약 불가피하게 꼭 저장해야 한다고 하더라도,

Access Token 정도만 최소한으로 저장하고, Refresh Token은 절대 저장하면 안 된다.

 

---

📦 localStorage VS 쿠키

항목	localStorage	Cookies
저장 용량	약 5MB	약 4KB
자동 전송	❌ (직접 헤더에 넣어야 함)	✅ (매 요청마다 서버에 자동 전송됨)
접근 방식	JavaScript에서 접근 가능	JavaScript 또는 서버(HttpOnly)
보안성	❗️ XSS에 매우 취약	HttpOnly, Secure 설정 시 상대적으로 안전
사용 용도	사용자 설정, Access Token	세션, 인증 쿠키, Refresh Token

 

---

📚 결론

• localStorage는 브라우저에 데이터를 영구 저장할 수 있는 매우 편리한 저장소이다.
• 하지만, 언제든 사용자 조작이나 브라우저 설정으로 삭제될 수 있다는 점을 고려해야 한다.
• 특히, 보안에 취약한 저장소이므로, 민감한 정보는 저장하지 않는 것이 원칙이다.
• 사용자 경험 개선 (다크모드, 최근 본 항목 등)에는 매우 효과적이지만, 인증 관련 정보 저장에는 신중함이 요구된다.