0Pricing
JavaScript Academy · บทเรียน

การเปิดฐานข้อมูล

สร้างฐานข้อมูลและที่จัดเก็บออบเจ็กต์

การเปิดฐานข้อมูล เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

IndexedDB คืออะไร

IndexedDB คือฐานข้อมูลที่มีความจุสูง รองรับ transaction และติดตั้งมาในเบราว์เซอร์ ต่างจาก localStorage ซึ่งมีขนาดเล็ก เก็บได้เฉพาะสตริง และทำงานแบบพร้อมกัน IndexedDB สามารถจัดเก็บออบเจ็กต์ที่มีโครงสร้าง รองรับดัชนี และทำงานแบบไม่พร้อมกัน

การเปิดฐานข้อมูล

คุณเรียก indexedDB.open(name, version) เพื่อ open หรือสร้างฐานข้อมูลได้ การเรียกนี้จะคืนออบเจ็กต์คำขอซึ่งมีเหตุการณ์รายงานความสำเร็จหรือความล้มเหลว

const request = indexedDB.open('notes-db', 1);

เหตุการณ์ของคำขอ

คำขอเปิดฐานข้อมูลจะส่งเหตุการณ์ที่คุณต้องจัดการ:

  • onsuccess — ฐานข้อมูลพร้อมใช้งาน
  • onerror — การเปิดล้มเหลว
  • onupgradeneeded — ต้องสร้างหรืออัปเกรดโครงสร้างฐานข้อมูล
request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded จะทำงานเมื่อสร้างฐานข้อมูลเป็นครั้งแรกหรือเมื่อหมายเลขเวอร์ชันเพิ่มขึ้น นี่เป็นที่เดียวเท่านั้นที่คุณสามารถเปลี่ยนโครงสร้างฐานข้อมูลได้ เช่น สร้างหรือลบที่เก็บออบเจ็กต์และดัชนี

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

ที่เก็บออบเจ็กต์

ที่เก็บออบเจ็กต์เปรียบเสมือนตาราง ซึ่งเป็นภาชนะสำหรับระเบียน ให้สร้างที่เก็บนี้ด้วย db.createObjectStore(name, options) ภายใน onupgradeneeded

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

keyPath

keyPath ระบุให้ IndexedDB ทราบว่าคุณสมบัติใดของออบเจ็กต์แต่ละรายการเป็นคีย์หลัก ออบเจ็กต์ที่จัดเก็บต้องมีคุณสมบัตินั้น และคีย์ต้องไม่ซ้ำกัน

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

คีย์ที่เพิ่มขึ้นโดยอัตโนมัติ

หากออบเจ็กต์ของคุณไม่มีคีย์ตามธรรมชาติ ให้ IndexedDB สร้างคีย์ด้วย autoIncrement: true ระเบียนใหม่แต่ละรายการจะได้รับจำนวนเต็มลำดับถัดไป

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

การตรวจสอบที่เก็บที่มีอยู่

เนื่องจาก onupgradeneeded ทำงานทุกครั้งที่เพิ่มเวอร์ชัน ให้ตรวจสอบการสร้างด้วย db.objectStoreNames.contains เพื่อป้องกันข้อผิดพลาดเมื่อทำงานซ้ำ

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

การเก็บอ้างอิงฐานข้อมูล

บันทึกออบเจ็กต์ฐานข้อมูลจาก onsuccess ไว้ เพื่อให้การดำเนินการในภายหลังนำไปใช้ได้ การอ่านและการเขียนทั้งหมดต้องดำเนินการผ่านอินสแตนซ์ db นี้

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

การจัดการการเปิดที่ถูกบล็อก

หากแท็บอื่นเปิดฐานข้อมูลเวอร์ชันเก่าค้างอยู่ การอัปเกรดอาจถูก blocked ให้รับฟัง onblocked และขอให้ผู้ใช้ปิดแท็บอื่น

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

ขั้นตอนการเปิด

การเปิด IndexedDB มีขั้นตอนดังนี้: เรียก open พร้อมชื่อและเวอร์ชัน สร้างโครงสร้างฐานข้อมูลใน onupgradeneeded จากนั้นรับ db ใน onsuccess แล้วจึงใช้ transaction เพื่ออ่านและเขียนข้อมูล

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับการเปิดฐานข้อมูล

สรุป

คุณได้เรียนรู้การเปิดฐานข้อมูล IndexedDB:

  • indexedDB.open(name, version) จะคืนคำขอ
  • สร้างที่เก็บออบเจ็กต์ภายใน onupgradeneeded เท่านั้น
  • keyPath กำหนดคีย์หลัก ส่วน autoIncrement สร้างคีย์ให้โดยอัตโนมัติ
  • บันทึก db จาก onsuccess เพื่อใช้งานภายหลัง
  • จัดการ onerror และ onblocked

ถัดไปคือ transaction และการดำเนินการสร้าง อ่าน แก้ไข และลบข้อมูล

คำถามที่พบบ่อย

บทเรียน “การเปิดฐานข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเปิดฐานข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเปิดฐานข้อมูล”

สร้างฐานข้อมูลและที่จัดเก็บออบเจ็กต์ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การเปิดฐานข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การเปิดฐานข้อมูล
  2. ธุรกรรมและ CRUD
  3. ดัชนีและการค้นหา
  4. การกำหนดเวอร์ชันและการอัปเกรด
← กลับไปที่ JavaScript Academy