Web Storage
웹 스토리지는 클라이언트에 데이터를 저장하는 API이다. HTML5에서 도입되었으며 세션 스토리지와 로컬 스토리지를 제공한다. 동기식으로 작동한다. 클라이언트에 데이터를 저장하므로 보안 이슈가 있을 수 있다. 중요한 데이터나 유실되어선 안 되는 데이터는 서버 DB에 저장해야 한다.
key-value 형태로 데이터를 저장한다. key는 고유 식별자 역할을 하고, value에는 문자열 형태로 데이터를 저장할 수 있다. 이외의 타입은 변환하여 사용하여야 한다. 대체로 5MB의 저장 용량이 제공된다.
Session Storage
세션 스토리지에 저장된 데이터는 브라우저 탭을 닫으면 삭제된다. 같은 탭에서만 데이터를 공유할 수 있으며, 새로운 탭을 열면 새로운 세션으로 간주된다.
폼 입력 상태 저장, 페이지간 이동 시 일시적인 데이터 자장 등 한 번의 방문 동안 유지할 일시적인 상태 정보를 저장하는데 적합하다.
// 데이터 저장
sessionStorage.setItem('key', 'value');
// 데이터 읽기
const value = sessionStorage.getItem('key');
// 데이터 삭제
sessionStorage.removeItem('key');
// 모든 데이터 삭제
sessionStorage.clear();Local Storage
로컬 스토리지에 저장된 데이터는 브라우저를 종료하더라도 삭제되지 않는다. 사용자가 명시적으로 데이터를 삭제하지 않는 한 계속 저장된다. 저장된 데이터는 동일 도메인 내에서만 접근할 수 있다.
사용자 설정, 로그인 상태 유지 등 장기적인 데이터를 저장하는데 적합하다.
// 데이터 저장
localStorage.setItem('key', 'value');
// 데이터 읽기
const value = localStorage.getItem('key');
// 데이터 삭제
localStorage.removeItem('key');
// 모든 데이터 삭제
localStorage.clear();웹 스토리지 데이터는 문자열 형태로만 저장된다. 복잡한 형태의 데이터를 제정하기 위해서는, 객체를 JSON 문자열로 변환한 다음에 저장해야 한다.
const data = {a: 1, b: 2};
// JSON 문자열로 변환하여 저장
localStorage.setItem('key', JSON.stringify(data));
// 데이터 가져오기
const storedData = localStorage.getItem('key');
// JSON 문자열을 JavaScript 객체로 변환
const parsedData = JSON.parse(storedData);IndexedDB
IndexedDB는 웹 브라우저에서 대량의 구조화된 데이터를 클라이언트에 저장할 수 있는 비관계형 데이터베이스이다. HTML5에서 도입되었으며, 세션 스토리지와 로컬 스토리지보다 더 복잡하고 많은 양의 데이터를 관리할 수 있다.
IndexedDB는 비동기적으로 작동하여 작업을 수행하는 동안 웹 페이지의 성능을 저하시키지 않는다. 브라우저마다 차이가 있으나, 수백MB의 용량을 제공한다. 더 복잡하지만 더 많은 기능과 유연성을 갖추고 있다.
데이터베이스 생성
const name = 'myDatabase';
const version = 1
const request = indexedDB.open(name, version);
// 저장소 생성
request.onupgradeneeded = (event) => {
const db = event.target.result;
const objectStore = db.createObjectStore('myStore', { keyPath: 'id' });
// 성공 확인
request.onsuccess = (event) => {
const db = event.target.result;
console.log('Database opened successfully');
};
// 에러 발생
request.onerror = (event) => {
console.error('Database error:', event.target.errorCode);
};데이터 다루기
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(['myStore'], 'readwrite');
// type: readonly / readwrite / versionchange
const objectStore = transaction.objectStore('myStore');
// 데이터 추가
const data = { id: 1, name: 'kim', age: 30 };
const request = objectStore.add(data);
request.onsuccess = () => {
console.log('Data added successfully');
};
request.onerror = (event) => {
console.error('Add data error:', event.target.errorCode);
};
}; // 데이터 조회
const request = objectStore.get(1); // 데이터 삭제
const request = objectStore.delete(1);