브라우저 저장소 이해하기

브라우저 저장소 이해하기: localStorage, sessionStorage, IndexedDB의 차이점과 장단점
웹 개발을 하다보면 클라이언트 측에서 데이터를 저장하고 관리해야 할 때가 있는데, 이때 사용하는 브라우저 저장소에는 localStorage, sessionStorage, IndexedDB 등이 있습니다.

localStorage

localStorage는 웹 페이지의 세션이 종료되어도 데이터가 지속적으로 저장되기 때문에, 브라우저를 닫아도 데이터가 유지됩니다.
데이터는 문자열 형태로만 저장되며, 최대 5MB의 데이터를 저장할 수 있습니다.

• 장점: 세션이 종료되어도 데이터가 유지되므로, 영구적으로 데이터를 저장해야 하는 경우 유용합니다.
• 단점: 보안성이 낮고, 저장 용량이 제한적입니다.

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 불러오기
let data = localStorage.getItem('key');

// 데이터 삭제
localStorage.removeItem('key');

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

sessionStorage

sessionStorage는 웹 페이지의 세션이 종료되면 데이터가 삭제되기 떄문에, 브라우저를 닫으면 데이터가 사라집니다.
이때 데이터는 문자열 형태로만 저장되며, 최대 5MB의 데이터를 저장할 수 있습니다.

• 장점: 한 세션 동안 일시적으로 데이터를 저장해야 하는 경우 유용합니다.
• 단점: 세션이 종료되면 데이터가 사라지며, 저장 용량이 제한적입니다.

// 데이터 저장
sessionStorage.setItem('sessionKey', 'sessionValue');

// 데이터 불러오기
let sessionData = sessionStorage.getItem('sessionKey');

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

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

IndexedDB

IndexedDB는 브라우저에서 제공하는 NoSQL 데이터베이스로 대용량 데이터를 비동기적으로 처리할 수 있으며, 객체를 직접 저장할 수 있습니다.

• 장점: 대용량 데이터를 저장하고, 다양한 형태의 데이터를 관리할 수 있습니다. 또한, 트랜잭션을 지원합니다.
• 단점: API가 복잡하고 사용하기 어렵습니다.

// 데이터베이스 생성 혹은 열기
let request = window.indexedDB.open("myDatabase", 1);

// 데이터베이스 열림 성공
request.onsuccess = function(event) {
  let db = request.result;
  console.log("Success: " + db);
};

// 데이터베이스 열림 실패
request.onerror = function(event) {
  console.log("Error");
};

// 데이터베이스 구조 설정 (첫 생성시 혹은 버전 변경시 실행)
request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("myObjectStore", {keyPath: "id"});
  objectStore.createIndex("name", "name", { unique: false });
};