JavaScript Academy · บทเรียน

การกำหนดเวอร์ชันและการอัปเกรด

ย้ายโครงสร้างข้อมูลเมื่อมีการเปลี่ยนเวอร์ชัน

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

เหตุใดจึงต้องจัดการรุ่น

แอปมีการพัฒนาอยู่เสมอ เช่น เพิ่มที่เก็บข้อมูล เพิ่มดัชนี หรือเปลี่ยนรูปแบบข้อมูล IndexedDB ใช้ หมายเลขรุ่น เพื่อจัดการการเปลี่ยนแปลงโครงสร้างข้อมูลเหล่านี้อย่างปลอดภัยในเบราว์เซอร์ของผู้ใช้ทุกคน

หมายเลขรุ่น

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

// Bumping from 1 to 2 triggers onupgradeneeded:
const request = indexedDB.open('app-db', 2);

การอัปเกรดทำได้เฉพาะเพิ่มรุ่น

คุณเพิ่มรุ่นได้เท่านั้น การเปิดด้วยหมายเลขที่ต่ำกว่าหมายเลขที่จัดเก็บไว้จะล้มเหลวพร้อมข้อผิดพลาด อย่าลดหมายเลขรุ่นลง

// If the stored DB is version 3:
const req = indexedDB.open('app-db', 2);
req.onerror = () => console.log('cannot open older version');

oldVersion และ newVersion

ภายใน onupgradeneeded เหตุการณ์จะแสดง oldVersion และ newVersion ให้ใช้ค่าเหล่านี้เพื่อดำเนินการเฉพาะการย้ายข้อมูลที่ยังไม่เคยทำ

request.onupgradeneeded = (e) => {
  console.log('upgrading from', e.oldVersion, 'to', e.newVersion);
};

การย้ายข้อมูลแบบเพิ่มทีละขั้น

รูปแบบที่มีความทนทานคือการทำงานต่อเนื่องโดยใช้ oldVersion: แต่ละบล็อกต่อยอดจากบล็อกก่อนหน้า เพื่อให้ผู้ใช้จากรุ่นเก่าใดก็ตามไปถึงโครงสร้างข้อมูลรุ่นล่าสุดได้

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 1) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
  if (e.oldVersion < 2) {
    db.createObjectStore('tags', { keyPath: 'name' });
  }
};

การเพิ่มดัชนีภายหลัง

หากต้องการเพิ่มดัชนีให้ที่เก็บข้อมูลเดิมระหว่างการอัปเกรด ให้รับที่เก็บข้อมูลจากธุรกรรมการอัปเกรด แล้วเรียก createIndex บนที่เก็บข้อมูลนั้น

request.onupgradeneeded = (e) => {
  if (e.oldVersion < 3) {
    const store = e.target.transaction.objectStore('notes');
    store.createIndex('byDate', 'createdAt');
  }
};

ธุรกรรมเปลี่ยนรุ่น

ระหว่าง onupgradeneeded ค่า transaction ของเหตุการณ์คือธุรกรรม versionchange แบบพิเศษ ซึ่งเป็นบริบทเดียวที่สามารถแก้ไขโครงสร้างข้อมูลและย้ายข้อมูลได้พร้อมกัน

request.onupgradeneeded = (e) => {
  const tx = e.target.transaction; // versionchange tx
  const store = tx.objectStore('notes');
  // migrate existing records here if needed
};

การย้ายข้อมูลที่มีอยู่

หากการเปลี่ยนแปลงโครงสร้างข้อมูลจำเป็นต้องปรับรูปแบบระเบียน ให้ใช้เคอร์เซอร์วนดูที่เก็บข้อมูลภายในการอัปเกรด แล้วใช้ put บันทึกค่าที่แปลงแล้วกลับเข้าไป

const store = e.target.transaction.objectStore('notes');
store.openCursor().onsuccess = (ev) => {
  const cursor = ev.target.result;
  if (cursor) {
    const note = cursor.value;
    note.archived = false; // new field
    cursor.update(note);
    cursor.continue();
  }
};

เหตุการณ์ versionchange

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

db.onversionchange = () => {
  db.close(); // let the other tab upgrade
  console.log('database is outdated, please reload');
};

การลบที่เก็บข้อมูล

คุณสามารถลบที่เก็บข้อมูลที่ไม่ใช้แล้วระหว่างการอัปเกรดด้วย db.deleteObjectStore(name) การดำเนินการนี้จะลบที่เก็บข้อมูลและข้อมูลภายในอย่างถาวร

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 4 && db.objectStoreNames.contains('temp')) {
    db.deleteObjectStore('temp');
  }
};

แนวทางปฏิบัติที่ดีในการอัปเกรด

ทำให้การย้ายข้อมูลทำซ้ำได้อย่างปลอดภัยและเรียงตาม oldVersion ปิดการเชื่อมต่อเก่าภายใต้ versionchange และทดสอบการอัปเกรดจากทุกรุ่นก่อนหน้า วิธีนี้ช่วยรักษาข้อมูลของผู้ใช้เดิมไว้ได้ครบถ้วน

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการจัดการรุ่นและการอัปเกรด

ทบทวน

คุณได้เรียนรู้เกี่ยวกับการจัดการรุ่นและการอัปเกรดแล้ว:

เพิ่มหมายเลขรุ่นเพื่อเรียกใช้ onupgradeneeded
ใช้ oldVersion สำหรับการย้ายข้อมูลแบบเพิ่มทีละขั้นและทำซ้ำได้อย่างปลอดภัย
ธุรกรรม versionchange ของการอัปเกรดใช้แก้ไขทั้งโครงสร้างข้อมูลและข้อมูล
ย้ายระเบียนด้วยเคอร์เซอร์และ cursor.update
ปิดแท็บเก่าภายใต้เหตุการณ์ versionchange

คุณเรียน IndexedDB จบแล้ว ถัดไปคือเซอร์วิสเวิร์กเกอร์

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

บทเรียน “การกำหนดเวอร์ชันและการอัปเกรด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดเวอร์ชันและการอัปเกรด”

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

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

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

บทเรียน “การกำหนดเวอร์ชันและการอัปเกรด” ใช้เวลานานแค่ไหน

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

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

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

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

การเปิดฐานข้อมูล
ธุรกรรมและ CRUD
ดัชนีและการค้นหา
การกำหนดเวอร์ชันและการอัปเกรด

← กลับไปที่ JavaScript Academy