Web Storage — localStorage, sessionStorage และ IndexedDB

เปรียบเทียบ

localStorage

// เขียน
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'Panupong' }));

// อ่าน
const theme = localStorage.getItem('theme');
const user = JSON.parse(localStorage.getItem('user') ?? 'null');

// ลบ
localStorage.removeItem('theme');
localStorage.clear();  // ลบทั้งหมด

เมื่อไหร่ใช้: user preferences, theme, กรองสั้นๆ ที่ไม่ sensitive

sessionStorage

// เหมือน localStorage แต่หายเมื่อปิด tab
sessionStorage.setItem('draft', JSON.stringify(formData));
const draft = JSON.parse(sessionStorage.getItem('draft') ?? 'null');

เมื่อไหร่ใช้: form draft ระหว่าง session, ข้อมูลชั่วคราว

IndexedDB

const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  const store = db.createObjectStore('files', { keyPath: 'id', autoIncrement: true });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (e) => {
  const db = e.target.result;
  const tx = db.transaction('files', 'readwrite');
  tx.objectStore('files').add({ name: 'document.pdf', size: 1024 });
};

เมื่อไหร่ใช้: cache large data, offline apps, binary files (images, PDFs)

ใช้ idb library แทน raw API

npm install idb

import { openDB } from 'idb';

const db = await openDB('myDB', 1, {
  upgrade(db) {
    db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });
  },
});

await db.add('notes', { title: 'My Note', body: 'Content' });
const all = await db.getAll('notes');

กฎทั่วไป: localStorage สำหรับ preferences, sessionStorage สำหรับ temporary state, IndexedDB สำหรับ structured data หรือ binary content