local storage vs session storage vs indexDB

웹 스토리지

웹 스토리지(Web Storage)란 웹 브라우저에서 클라이언트 측 웹 애플리케이션 데이터를 저장하고 관리하기 위한 기술이다. 이를 통해 웹 애플리케이션은 사용자의 로컬 컴퓨터에 데이터를 저장하고, 이후에도 접속할 때 데이터를 검색하거나 수정할 수 있다.

오늘 살펴볼 주제가 바로 이 웹 스토리지의 대표적인 기술들인 localStorage, sessionStorage, IndexedDB 되시겠다.

언제 쓰이는가?

우리가 주로 웹 스토리지를 사용하는 현실적인 예시는 아래와 같다.

1. 장바구니 저장: 온라인 쇼핑 웹 사이트에서 사용자가 상품을 장바구니에 추가할 때, 이 정보는 웹 스토리지에 저장됩니다. 사용자가 웹 사이트를 나가고 다시 들어왔을 때, 장바구니에 담긴 상품이 그대로 유지되어 있어 편리하게 결제할 수 있습니다.

2. 사용자 로그인 유지: 웹 애플리케이션에서 사용자 로그인 정보를 웹 스토리지에 저장하여, 사용자가 웹 사이트를 나가고 다시 방문했을 때 로그인 상태를 유지합니다. 이로써 사용자는 반복해서 로그인 정보를 입력할 필요 없이 편리하게 이용할 수 있습니다.

3. 게임 진행 상태 저장: 온라인 게임에서 플레이어의 게임 진행 상태, 레벨, 보상, 아이템 등을 웹 스토리지에 저장합니다. 이를 통해 플레이어는 게임을 종료하고 나중에 돌아와도 마지막 플레이 시점에서부터 계속할 수 있습니다.

4. 사용자 환경 설정 저장: 웹 애플리케이션에서 사용자가 선호하는 언어, 테마, 알림 설정 등을 웹 스토리지에 저장합니다. 이렇게 설정한 내용은 사용자가 다음 방문 때에도 그대로 유지되어 더 나은 사용자 경험을 제공합니다.

🤔 localStorage, sessionStorage, indexedDB 가 뭐야??

localStorage와 sessionStorage는 브라우저가 지원하는 웹 스토리지이고 indexDB는 웹 스토리지와는 별개의 개념으로 클라이언트측에서 저장하는 데이터베이스이다. 하지만 세 녀석 모두 '웹 애플리케이션에서 데이터를 로컬에 저장하고 유지하는 데 사용된다.'라고 하는 목적은 모두 동일하다. 하지만 디테일한 동작방식이 다르기에 각자가 어떻게 동작하는지에 대한 부분을 아는 것이 중요하다.

1️⃣ Local Storage

localStorage를 사용하면 웹 애플리케이션은 브라우저 세션 간에 데이터를 유지할 수 있으며, 특징은 브라우저를 닫아도 데이터가 지속된다.

아래는 해당 스토리지의 보다 자세한 특징과 사용법이다.

1. key-value쌍: localStorage는 키와 값의 쌍으로 데이터를 저장합니다. 데이터를 저장할 때는 키와 해당 값을 지정합니다.

2. 영구적 저장: 브라우저를 닫아도 localStorage에 저장된 데이터는 지속됩니다. 사용자가 나중에 웹 애플리케이션을 열어도 이 데이터에 액세스할 수 있습니다.

3. 도메인별로 구분: localStorage는 도메인별로 데이터를 구분합니다. 즉, 같은 도메인에서 실행 중인 다른 웹 애플리케이션은 해당 localStorage에 액세스할 수 있지만, 다른 도메인의 웹 애플리케이션은 액세스할 수 없습니다.

4. 용량 제한: 브라우저마다 localStorage의 용량 제한이 다를 수 있으며, 일반적으로는 최소 수 및 데이터 크기 제한이 있습니다.

아래는 javascript로 localStorage를 사용하는 예시 코드이다.

// 데이터 저장
localStorage.setItem('키', '값');

// 데이터 검색
const 데이터 = localStorage.getItem('키');

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

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

2️⃣ Session Storage

sessionStorage의 특징은 데이터가 현재 브라우저 세션 동안만 유지되며, 브라우저를 닫으면 데이터가 삭제된다는 점이다. 사용자 세션 동안 일시적인 데이터를 저장하고 나중에 그 데이터를 사용해야 할 때 유용하다.

아래는 해당 스토리지의 보다 자세한 특징과 사용법이다.

1. key-value 쌍: sessionStorage도 키와 값의 쌍으로 데이터를 저장합니다. 데이터를 저장할 때는 키와 해당 값을 지정합니다.

2. 세션 동안 유지: sessionStorage에 저장된 데이터는 브라우저 세션 동안만 유지됩니다. 브라우저를 닫거나 탭을 닫으면 데이터가 삭제됩니다.

3. 도메인별로 구분: sessionStorage도 localStorage와 마찬가지로 도메인별로 데이터를 구분합니다. 같은 도메인에서 실행 중인 다른 웹 애플리케이션은 해당 sessionStorage에 액세스할 수 있지만, 다른 도메인의 웹 애플리케이션은 액세스할 수 없습니다.

4. 용량 제한: 브라우저마다 sessionStorage의 용량 제한이 다를 수 있으며, 일반적으로는 최소 수 및 데이터 크기 제한이 있습니다.

// 데이터 저장
sessionStorage.setItem('키', '값');

// 데이터 검색
const 데이터 = sessionStorage.getItem('키');

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

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

sessionStorage는 주로 웹 애플리케이션에서 1)로그인 상태를 유지하거나, 2)임시 작업 중에 중간 결과를 저장하거나, 3)웹 페이지 간에 데이터를 공유하지 않아야 하는 경우에 사용된다.

3️⃣ IndexDB

indexDB는 비구조화된 데이터를 저장하고 검색하는 데 사용된다. 이 친구는 브라우저 내에 데이터베이스를 생성하고 이를 통해 대용량 데이터를 비동기적으로 저장하고 관리할 수 있는 강력한 메커니즘이다.(좀 뛰어난 아이..)

주로 복잡한 데이터 저장 및 검색 작업을 수행하는 웹 애플리케이션에서 사용된다.

아래는 보다 자세한 특징과 사용 방법이다.

1. 비동기 작업: IndexedDB 작업은 비동기적으로 수행됩니다. 이는 웹 애플리케이션의 성능을 향상시키고 브라우저가 응답하지 않음을 방지하는 데 도움이 됩니다.

2. 복잡한 데이터 구조: IndexedDB는 객체 스토어(Object Store)를 통해 복잡한 데이터 구조를 저장합니다. 객체 스토어는 자바스크립트 객체와 유사한 데이터를 저장하는 데 사용됩니다.

3. 쿼리 및 인덱싱: IndexedDB는 데이터를 쿼리하고 인덱싱하여 빠른 검색을 지원합니다. 이를 통해 대량의 데이터를 효율적으로 관리할 수 있습니다.

4. 트랜잭션 관리: 데이터베이스 작업은 트랜잭션으로 묶여 안전하게 처리됩니다. 이로써 데이터 무결성을 보호하고 동시 액세스 문제를 방지합니다.

5. 용량 제한 우회: IndexedDB는 로컬 스토리지보다 더 큰 데이터 양을 저장할 수 있으며, 브라우저마다 다른 용량 제한이 있습니다.

트랜잭션이란?
트랜잭션(Transaction)은 데이터베이스에서 하나 이상의 작업을 논리적으로 묶어서 실행하는 데이터베이스 처리의 단위입니다. 데이터베이스에서 데이터를 추가, 수정, 삭제, 검색하는 등의 작업은 모두 트랜잭션 내에서 이루어집니다. 트랜잭션은 데이터베이스의 무결성을 보존하고 데이터베이스의 일관성을 유지하기 위해 중요한 역할을 합니다.(아직은 정확히 무슨 소리인지 모르겠다ㅜㅜ)

// IndexedDB 데이터베이스 열기 또는 생성
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  // 데이터베이스 스키마 업그레이드 로직
  const db = event.target.result;
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
  // 필요한 인덱스 생성
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  // 데이터 추가, 검색, 업데이트, 삭제 등의 작업 수행
};

request.onerror = function(event) {
  // 오류 처리
};

주의할 점이 있다면 indexedDB를 사용하여 데이터를 저장하기 위해서는 위 예시코드같이 JavaScript API를 활용해야 한다.

다시 정리하면, indexedDB는 대용량 데이터를 저장하고 복잡한 검색 작업을 수행할 때 유용하며, 웹 애플리케이션에서 오프라인 데이터 동기화와 같은 고급 사용 사례를 다루는 데 적합하다.