จาก Web SQL ไปยัง SQLite Wasm: คำแนะนำในการย้ายข้อมูลฐานข้อมูล

ด้วย SQLite Wasm ที่ได้รับการสนับสนุนจากระบบไฟล์ส่วนตัวดั้งเดิม มีการแทนที่เทคโนโลยีฐานข้อมูล Web SQL ที่เลิกใช้งานแล้ว บทความนี้เป็นคำแนะนำในการย้ายข้อมูลจาก SQL บนเว็บไปยัง SQLite Wasm

พื้นหลังที่จำเป็น

โพสต์การเลิกใช้งานและการนำ Web SQL ออกนั้นประกาศการเลิกใช้งานเทคโนโลยีฐานข้อมูล Web SQL แม้ว่าตัวเทคโนโลยีอาจจะเลิกใช้งานไปแล้ว แต่กรณีการใช้งานที่เทคโนโลยีนี้รับมืออยู่ก็ไม่ได้มีมาก ดังนั้นโพสต์ติดตามผล SQLite Wasm ในเบราว์เซอร์ที่สนับสนุนโดยระบบไฟล์ส่วนตัวดั้งเดิม ได้สรุปชุดเทคโนโลยีทดแทนตามฐานข้อมูล SQLite ซึ่งคอมไพล์ไปยัง Web Assembly (Wasm) และสนับสนุนโดยระบบไฟล์ส่วนตัวต้นทาง หากต้องการปิดแวดวง บทความนี้แสดงวิธีการย้ายข้อมูลฐานข้อมูลจาก Web SQL ไปยัง SQLite Wasm

การย้ายข้อมูลฐานข้อมูล

4 ขั้นตอนต่อไปนี้จะแสดงให้เห็นถึงแนวคิดเชิงแนวคิดในการย้ายข้อมูลฐานข้อมูล Web SQL ไปยัง SQLite Wasm โดยฐานข้อมูล SQLite ที่ได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวต้นทาง ซึ่งอาจเป็นพื้นฐานสําหรับโค้ดของคุณเองที่ปรับแต่งให้เหมาะกับความต้องการในการย้ายข้อมูล Web SQL

ฐานข้อมูล Web SQL ที่จะย้ายข้อมูล

สมมติฐานเบื้องต้นของคู่มือการย้ายข้อมูลนี้คือคุณมีฐานข้อมูล Web SQL อยู่แล้ว 1 รายการ (หรือหลายรายการ) ที่เก็บข้อมูลที่เกี่ยวข้องกับแอปของคุณ ในภาพหน้าจอด้านล่าง คุณจะเห็นฐานข้อมูลตัวอย่างชื่อ mydatabase กับตารางพายุฝนที่แมปอารมณ์กับความรุนแรง เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณดูฐานข้อมูล SQL ของเว็บเพื่อแก้ไขข้อบกพร่องได้ ดังที่แสดงในภาพหน้าจอต่อไปนี้

การแปลฐานข้อมูล Web SQL เป็นคำสั่ง SQL

หากต้องการย้ายข้อมูลด้วยวิธีที่โปร่งใสสำหรับผู้ใช้ กล่าวคือ โดยที่ผู้ใช้ไม่ต้องทำขั้นตอนการย้ายข้อมูลใดๆ ด้วยตนเอง ข้อมูลเหล่านั้นในฐานข้อมูลต้องเปลี่ยนกลับไปเป็นคำสั่ง SQL เดิมที่สร้างขึ้นมาตั้งแต่แรก ปัญหานี้เกิดขึ้นแล้ว และสคริปต์การย้ายข้อมูลที่ใช้ในบทความนี้ (mywebsqldump.js) จะอิงตามไลบรารีชุมชนที่ชื่อว่า websqldump.js โดยมีการปรับเปลี่ยนเล็กน้อย ตัวอย่างโค้ดต่อไปนี้แสดงโค้ดที่จำเป็นในการแปล mydatabase ของฐานข้อมูล Web SQL เป็นชุดคำสั่ง SQL

websqldump.export({
  database: 'mydatabase',
  version: '1.0',
  success: function(sql) {
    // The SQL statements.
  },
  error: function(err) {
    // Handle the error.
  }
});

การเรียกใช้โค้ดนี้จะทําให้เกิดสตริงคำสั่ง SQL ด้านล่าง

CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');

การนำเข้าข้อมูลไปยัง SQLite Wasm

สิ่งที่เหลือคือการเรียกใช้คำสั่ง SQL เหล่านี้ในบริบทของ SQLite Wasm สำหรับรายละเอียดทั้งหมดเกี่ยวกับการตั้งค่า SQLite Wasmup เราขอแนะนำให้อ่านบทความ SQLite Wasm ในเบราว์เซอร์ที่สนับสนุนโดยระบบไฟล์ส่วนตัวของต้นทาง แต่ข้อมูลสำคัญอยู่ด้านล่าง โปรดทราบว่าโค้ดนี้ต้องทำงานใน Worker (ที่ไลบรารีสร้างให้คุณโดยอัตโนมัติ) และมีการตั้งค่าส่วนหัว HTTP ที่จำเป็นอย่างถูกต้อง คุณติดตั้งแพ็กเกจ @sqlite.org/sqlite-wasm ได้จาก npm

import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';

(async () => {
  try {
    const promiser = await new Promise((resolve) => {
      const _promiser = sqlite3Worker1Promiser({
        onready: () => {
          resolve(_promiser);
        },
      });
    });

    let response;

    response = await promiser('open', {
      filename: 'file:mydatabase.db?vfs=opfs',
    });
    const { dbId } = response;

    const sql = `
      CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
      INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
      INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
      INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
    await promiser('exec', { dbId, sql });

    await promiser('close', { dbId });
  } catch (err) {
    if (!(err instanceof Error)) {
      err = new Error(err.result.message);
    }
    console.error(err.name, err.message);
  }
})();

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

หากต้องการยืนยันว่าข้อมูลที่นำเข้าเป็นข้อมูลเดียวกับข้อมูล Web SQL เริ่มต้น ให้คลิกไฟล์ mydatabase.db แล้วส่วนขยาย OPFS Explorer จะแสดงกล่องโต้ตอบ Save File เพื่อให้คุณบันทึกไฟล์ในระบบไฟล์ที่ผู้ใช้มองเห็น เมื่อบันทึกไฟล์ฐานข้อมูลแล้ว ให้ใช้แอปโปรแกรมดู SQLite เพื่อสำรวจข้อมูล Project Fugu API Showcase มีแอปหลายรายการสำหรับการทำงานกับ SQLite ในเบราว์เซอร์ ตัวอย่างเช่น Sqlime — SQLite Playground ให้คุณเปิดไฟล์ฐานข้อมูล SQLite จากฮาร์ดดิสก์ของคุณและเรียกใช้การค้นหาในฐานข้อมูลได้ ดังที่คุณเห็นในภาพหน้าจอด้านล่าง ตารางพายุฝนได้รับการนำเข้าไปยัง SQLite อย่างถูกต้องแล้ว

การเพิ่มพื้นที่ว่างในพื้นที่เก็บข้อมูล Web SQL

แม้ว่า (อาจจะเป็นเรื่องแปลก) ที่ไม่สามารถลบฐานข้อมูล Web SQL ได้ แต่คุณควรจะเพิ่มพื้นที่ว่างบางส่วนได้โดยการทิ้งตาราง Web SQL ที่เลิกใช้แล้วในปัจจุบันหลังจากที่คุณย้ายข้อมูลไปยัง SQLite Wasm แล้ว หากต้องการแสดงตารางทั้งหมดในฐานข้อมูล Web SQL และวางตารางโดยใช้ JavaScript ให้ใช้โค้ดดังตัวอย่างต่อไปนี้

const dropAllTables = () => {
  try {
    db.transaction(function (tx) {
      tx.executeSql(
        "SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
        [],
        function (tx, result) {
          const len = result.rows.length;
          const tableNames = [];
          for (let i = 0; i < len; i++) {
            const tableName = result.rows.item(i).name;
            tableNames.push(`'${tableName}'`);
            db.transaction(function (tx) {
              tx.executeSql('DROP TABLE ' + tableName);
            });
          }
          console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
        }
      );
    });
  } catch (err) {
    console.error(err.name, err.message);
  }
};

การทำงานกับข้อมูลหลังจากการย้ายข้อมูล

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

ทดสอบเลย

การสาธิตนี้จะทำให้คุณสามารถสร้างฐานข้อมูล Web SQL ด้วยข้อมูลตัวอย่าง จากนั้นดัมพ์ข้อมูล Web SQL เป็นคำสั่ง SQL ซึ่งต่อไปจะถูกนำเข้าไปยัง SQLite Wasm ที่ได้รับการสนับสนุนจากระบบไฟล์ส่วนตัวของต้นทาง สุดท้ายคุณจะเพิ่มพื้นที่ว่างได้ด้วยการลบข้อมูล Web SQL ที่ล้าสมัย ตรวจสอบซอร์สโค้ดเพื่อดูการติดตั้งใช้งานอย่างเต็มรูปแบบ รวมถึงไฟล์ mywebsqldump.js ที่แพตช์แล้ว

บทสรุป

การย้ายข้อมูลฐานข้อมูล Web SQL ไปยัง SQLite Wasm ที่ได้รับการสนับสนุนจากระบบไฟล์ส่วนตัวของต้นทางสามารถทำได้ในลักษณะที่โปร่งใสสำหรับผู้ใช้ ผู้ใช้จะไม่สังเกตเห็นว่าตอนนี้ข้อมูลของตนโฮสต์อยู่ในระบบไฟล์ส่วนตัวต้นทางในฐานข้อมูล SQLite และจะไม่อยู่ใน Web SQL อีกต่อไป โดยรวมแล้ว การย้ายข้อมูลจาก Web SQL ไปยัง SQLite เป็นขั้นตอนที่จำเป็นสำหรับนักพัฒนาเว็บที่ต้องการรับประกันความเสถียรและความสามารถในการปรับขนาดของแอปพลิเคชันของตนในระยะยาว แม้ว่ากระบวนการอาจต้องใช้ความพยายามเล็กน้อยในช่วงแรก แต่ประโยชน์ของโซลูชันฐานข้อมูลที่ทนทาน ยืดหยุ่น และเหนือสิ่งอื่นใดคือ โซลูชันฐานข้อมูลที่ประสบความสำเร็จสำหรับอนาคตจะทำให้คุ้มค่ากับการลงทุน