브라우저 로컬 저장소(LocalStorage, SessionStorage, IndexedDB) 비교

1. 개요

웹 애플리케이션에서 데이터를 저장하고 유지하는 것은 중요한 기능이다. 브라우저는 클라이언트 측에서 데이터를 저장할 수 있도록 다양한 API를 제공하며, 대표적으로 LocalStorage, SessionStorage, IndexedDB가 있다.

각 저장소는 목적과 사용 방식이 다르며, 적절한 상황에서 올바르게 활용하는 것이 중요하다. 이번 글에서는 LocalStorage, SessionStorage, IndexedDB의 차이점과 활용법을 비교해 보겠다.

 

 

---

2. 브라우저 저장소 개요

(1) LocalStorage

LocalStorage는 브라우저에 데이터를 영구적으로 저장할 수 있는 저장소다. 페이지를 새로고침하거나 브라우저를 닫아도 데이터가 유지되며, 동일한 도메인 내에서 모든 탭과 창에서 접근 가능하다.

• 저장 방식: Key-Value 형식 (문자열)
• 용량 제한: 약 5~10MB
• 데이터 유지 기간: 영구 저장 (사용자가 삭제하지 않는 한 유지)
• 보안: HTTP 요청과 별개로 저장되므로 보안이 강하지만, XSS 공격에 취약

javascript

복사편집

// 데이터 저장 localStorage.setItem("username", "홍길동"); // 데이터 가져오기 console.log(localStorage.getItem("username")); // "홍길동" // 데이터 삭제 localStorage.removeItem("username"); // 전체 데이터 삭제 localStorage.clear();

✅ 언제 사용해야 할까?

• 로그인 유지, 사용자 설정 (테마, 언어 등) 저장
• 장기간 보관해야 하는 데이터 (예: 장바구니, 북마크 목록 등)

---

(2) SessionStorage

SessionStorage는 LocalStorage와 유사하지만, 데이터가 브라우저 세션(탭)이 종료되면 삭제된다는 점이 다르다. 즉, 같은 도메인의 새로운 탭을 열어도 이전 세션의 데이터는 유지되지 않는다.

• 저장 방식: Key-Value 형식 (문자열)
• 용량 제한: 약 5MB
• 데이터 유지 기간: 탭(세션) 종료 시 삭제
• 보안: LocalStorage와 동일, XSS 공격에 주의 필요

javascript

복사편집

// 데이터 저장 sessionStorage.setItem("sessionKey", "임시 데이터"); // 데이터 가져오기 console.log(sessionStorage.getItem("sessionKey")); // "임시 데이터" // 데이터 삭제 sessionStorage.removeItem("sessionKey"); // 전체 데이터 삭제 sessionStorage.clear();

✅ 언제 사용해야 할까?

• 일시적인 데이터 저장 (예: 페이지 간 이동 시 임시 데이터 보관)
• 민감한 정보 관리 (탭을 닫으면 자동 삭제되므로 보안성 향상)
• 폼 입력 데이터 임시 저장

---

(3) IndexedDB

IndexedDB는 LocalStorage, SessionStorage보다 훨씬 강력한 비관계형(NoSQL) 데이터베이스다. 대량의 구조화된 데이터를 저장할 수 있으며, 객체 저장과 트랜잭션을 지원한다.

• 저장 방식: IndexedDB API를 사용한 객체 저장
• 용량 제한: 50MB 이상 (브라우저마다 다름)
• 데이터 유지 기간: 영구 저장
• 보안: 브라우저 샌드박스 내에서 실행되어 안전하지만, XSS 방지 필요

javascript

복사편집

// IndexedDB 데이터 저장 예제 const request = indexedDB.open("myDatabase", 1); request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users"); store.add({ id: 1, name: "홍길동", age: 30 }); }; request.onerror = function(event) { console.error("IndexedDB 오류", event.target.error); };

✅ 언제 사용해야 할까?

• 대량의 데이터 저장 (예: 캐싱, 오프라인 모드 지원)
• 복잡한 데이터 구조 저장 (JSON, 객체 등)
• 웹 애플리케이션의 오프라인 동작 지원

---

3. LocalStorage, SessionStorage, IndexedDB 비교

항목LocalStorageSessionStorageIndexedDB

데이터 구조	Key-Value (문자열)	Key-Value (문자열)	객체 저장 (NoSQL)
용량 제한	5~10MB	5MB	50MB 이상
데이터 유지	영구 저장	세션 종료 시 삭제	영구 저장
보안	XSS 공격에 취약	XSS 공격에 취약	비교적 안전
읽기/쓰기 속도	빠름	빠름	느림 (트랜잭션 지원)
사용 예시	사용자 설정, 로그인 정보 저장	임시 데이터 저장	대용량 데이터, 오프라인 저장소

✅ 선택 가이드

• 빠른 데이터 저장 & 읽기 → LocalStorage 또는 SessionStorage
• 대용량 데이터 & 복잡한 구조 저장 → IndexedDB
• 민감한 데이터 보호 → SessionStorage (브라우저 종료 시 삭제됨)

---

4. 실전 활용 예제

(1) 로그인 유지 (LocalStorage 활용)

javascript

복사편집

// 로그인 시 사용자 정보 저장 localStorage.setItem("user", JSON.stringify({ id: 1, name: "홍길동" })); // 페이지 로드 시 사용자 정보 가져오기 const user = JSON.parse(localStorage.getItem("user")); if (user) { console.log(`로그인된 사용자: ${user.name}`); }

---

(2) 입력 폼 데이터 자동 저장 (SessionStorage 활용)

javascript

복사편집

const input = document.querySelector("#name"); input.addEventListener("input", () => { sessionStorage.setItem("name", input.value); }); // 페이지 새로고침 후 데이터 복원 if (sessionStorage.getItem("name")) { input.value = sessionStorage.getItem("name"); }

---

(3) 오프라인 데이터 저장 (IndexedDB 활용)

javascript

복사편집

const dbRequest = indexedDB.open("appDB", 1); dbRequest.onupgradeneeded = function(event) { const db = event.target.result; db.createObjectStore("settings", { keyPath: "id" }); }; dbRequest.onsuccess = function(event) { const db = event.target.result; const tx = db.transaction("settings", "readwrite"); const store = tx.objectStore("settings"); store.put({ id: "theme", value: "dark" }); tx.oncomplete = () => console.log("데이터 저장 완료"); };

---

5. 결론

✅ LocalStorage vs SessionStorage vs IndexedDB

• LocalStorage → 영구 저장, 최대 10MB, 간단한 데이터 유지
• SessionStorage → 탭 종료 시 삭제, 5MB 제한, 임시 데이터
• IndexedDB → 대용량 저장, 객체 저장 가능, 트랜잭션 지원

📌 언제 사용해야 할까?

• 빠른 데이터 조회 → LocalStorage, SessionStorage
• 일시적인 데이터 저장 → SessionStorage
• 대량의 데이터 저장 & 오프라인 모드 → IndexedDB

웹 애플리케이션의 요구 사항에 따라 적절한 저장소를 선택해 효과적으로 활용해 보자!