[JS-FINAL] 13. 브라우저 저장소

유데미 강의 JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정을 들으면서 자바스크립트를 다시 한 번 익히는 중이다. 계속되는 포스팅에서 강의를 듣고 미처 몰랐던 부분, 심화 이해가 필요한 부분에 대해 주제별로 간단하게 기록하겠다.

1. 로컬 스토래지, 세션 스토리지, 쿠키, IndexDB

1. 로컬 스토래지 :

• 키-값 쌍의 형태로 저장.
• 브라우저를 닫더라도 데이터가 지속.
• 사용자 설정, 기본 사용자 데이터등을 저장하는데 유용. 복잡한 데이터를 다루는 데는 한계가 있음.
• JavaScript를 통해서만 접근이 가능.

2. 세션 스토래지 :

• 브라우저를 닫으면 모든 데이터 삭제.
• 세션 동안 유지되어야하는 장바구니 정보 등에 유용.

3. 쿠키 :

• 간단한 키-값 쌍.
• 만료 날짜 설정 가능.
• 사용자 세션 ID의 관리, 사이트 설정 등에 적합.
• 복잡한 데이터를 처리하는 데는 제한적.
• JavaScript로 접근 가능하며, 서버 측에서도 읽을 수 있는 유일한 클라이언트 측 저장소.

4. IndexedDB

• 클라이언트측 데이터 베이스.
• 복잡한 데이터 저장, 관리.
• JavaScript를 통해 액세스하고 데이터를 추가, 조회, 수정, 삭제.
• 복잡하지만 중요하지 않은 데이터를 저장하는 데 적합.

2. 쿠키 사용법

const userId = 'u123';
const user = {name : 'Hong', age:30};
document.cookie = `uid=${userId}`;
document.cookie = `user=${JSON.stringify(user)}`;

const cookieData = document.cookie.split('');
const data = cookieData.map(i => i.trim())
console.log(data); // ["uid=u123", "user={"name":"Hong","age","30"}"]

// 만료 기간 설정
document.cookie = `uid=${userId}; max-age=2`;

3. IndexedDB 사용법

const storeBtn = document.getElementById('store-btn');
const retrBtn = document.getElementById('retrieve-btn');

let db;
// open(데이터베이스명, 버전)
const dbRequest = indexedDB.open('storageDummy', 1);

dbRequest.onsuccess = function (e) {
  db = e.target.result;
};

dbRequest.onupgradeneeded = function (e) {
  db = e.target.result;
  // 객체 저장소 생성
  const objStore = db.createObjectStore('products', { keyPath: 'id' });

  objStore.transaction.oncomplete = function (e) {
    // readwrite or readonly
    const productsStore = db
      .transaction('products', 'readwrite')
      .objectStore('products');

    productsStore.add({
      id: 'p1',
      title: 'First product',
      price: 20,
      tags: ['Expensive', 'Luxury'],
    });
  };
};

dbRequest.onerror = function (e) {
  console.log('Error');
};

storeBtn.addEventListener('click', () => {
  if (!db) return;

  const productsStore = db
    .transaction('products', 'readwrite')
    .objectStore('products');

  productsStore.add({
    id: 'p2',
    title: 'Second product',
    price: 50,
    tags: ['Expensive', 'Luxury'],
  });
});

retrBtn.addEventListener('click', () => {
  const productsStore = db
    .transaction('products', 'readwrite')
    .objectStore('products');
  const request = productsStore.get('p2');

  request.onsuccess = function () {
    console.log(request.result);
  };
});