SQLite Wasm ที่ได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวที่เป็นต้นทางทำให้สามารถแทนที่เทคโนโลยีฐานข้อมูล Web SQL ที่เลิกใช้งานไปได้อย่างยืดหยุ่น บทความนี้เป็นคำแนะนำในการย้ายข้อมูลจาก Web SQL ไปยัง SQLite Wasm
ต้องระบุพื้นหลัง
โพสต์การเลิกใช้งานและนำ Web SQL ออกได้ประกาศการเลิกใช้งานเทคโนโลยีฐานข้อมูล Web SQL แม้ว่าตัวเทคโนโลยีจะเลิกใช้งานไปแล้ว แต่กรณีการใช้งานที่เทคโนโลยีดังกล่าวไม่เป็นปัญหามากนัก ดังนั้นโพสต์ติดตามผล SQLite Wasm ในเบราว์เซอร์ที่สนับสนุนโดยระบบไฟล์ส่วนตัวดั้งเดิมจึงแสดงชุดเทคโนโลยีทดแทนโดยอิงตามฐานข้อมูล SQLite คอมไพล์ไปยัง Web Assembly (Wasm) และได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวต้นทาง ในการปิดวงกลม บทความนี้แสดงวิธีย้ายข้อมูลฐานข้อมูลจาก Web SQL ไปยัง SQLite Wasm
การย้ายข้อมูลฐานข้อมูล
4 ขั้นตอนต่อไปนี้แสดงแนวคิดเชิงแนวคิดในการย้ายข้อมูลฐานข้อมูล SQLite ในเว็บไปยัง SQLite Wasm โดยใช้ฐานข้อมูล SQLite ที่สนับสนุนโดยระบบไฟล์ส่วนตัวที่เป็นต้นทาง ซึ่งอาจเป็นรากฐานสำหรับโค้ดที่ปรับแต่งให้เหมาะกับความต้องการในการย้ายข้อมูล Web SQL ของคุณ
ฐานข้อมูล SQL ของเว็บที่จะย้าย
สมมติฐานพื้นฐานของคู่มือการย้ายข้อมูลนี้คือคุณมีฐานข้อมูล Web SQL ที่มีอยู่แล้วอย่างน้อย 1 รายการ ซึ่งเก็บข้อมูลที่เกี่ยวข้องกับแอปของคุณ ในภาพหน้าจอด้านล่าง คุณจะเห็นฐานข้อมูลตัวอย่างชื่อ mydatabase พร้อมตารางพายุฝนที่จับคู่อารมณ์กับความรุนแรง เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณดูฐานข้อมูล SQL ในเว็บสำหรับการแก้ไขข้อบกพร่องได้ดังที่แสดงในภาพหน้าจอต่อไปนี้
การแปลฐานข้อมูล SQL ในเว็บเป็นคำสั่ง SQL
ในการย้ายข้อมูลในลักษณะที่แสดงต่อผู้ใช้อย่างโปร่งใส กล่าวคือ ผู้ใช้ไม่ต้องทำขั้นตอนการย้ายข้อมูลด้วยตนเอง ส่วนของข้อมูลในฐานข้อมูลจะต้องได้รับการแปลกลับไปเป็นคำสั่ง SQL เดิมที่สร้างข้อมูลดังกล่าวไว้ตั้งแต่แรก ความท้าทายนี้เกิดขึ้นแล้ว และสคริปต์การย้ายข้อมูลที่ใช้ในบทความนี้ mywebsqldump.js
อิงตามไลบรารีชุมชนที่ชื่อ websqldump.js
ซึ่งมีการปรับเปลี่ยนเล็กน้อย ตัวอย่างโค้ดต่อไปนี้แสดงโค้ดที่จำเป็นในการแปลฐานข้อมูล SQL ในเว็บ mydatabase เป็นชุดคำสั่ง 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 Wasm up เราขอแนะนำให้อ่านบทความ 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);
}
})();
หลังจากเรียกใช้โค้ดนี้แล้ว ให้ตรวจสอบไฟล์ฐานข้อมูลที่นำเข้าด้วยส่วนขยาย OPFS Explorer ใน Chrome DevTools ปัจจุบันมี 2 ไฟล์ โดยไฟล์แรกมีฐานข้อมูลจริงและอีกไฟล์มีข้อมูลรายการบันทึก โปรดทราบว่าทั้งสองไฟล์นี้อยู่ในระบบไฟล์ส่วนตัวที่เป็นต้นทาง คุณจึงต้องใช้ส่วนขยาย OPFS Explorer เพื่อดูไฟล์ดังกล่าว
หากต้องการยืนยันว่าข้อมูลที่นำเข้าเหมือนกับข้อมูล SQL ในเว็บเริ่มต้น ให้คลิกไฟล์ mydatabase.db
แล้วส่วนขยาย OPFS Explorer จะแสดงกล่องโต้ตอบบันทึกไฟล์เพื่อให้คุณบันทึกไฟล์ในระบบไฟล์ที่ผู้ใช้มองเห็น เมื่อบันทึกไฟล์ฐานข้อมูลแล้ว ให้ใช้แอปผู้ดู SQLite เพื่อสำรวจข้อมูล Project Fugu API Showcase มีแอปหลายรายการสําหรับการทํางานกับ SQLite ในเบราว์เซอร์ เช่น Sqlime — SQLite Playground ช่วยให้คุณเปิดไฟล์ฐานข้อมูล SQLite จากฮาร์ดดิสก์และเรียกใช้การค้นหาในฐานข้อมูลได้ ดังที่แสดงในภาพหน้าจอด้านล่าง ระบบนำเข้าตารางพายุฝนไปยัง SQLite อย่างถูกต้อง
เพิ่มพื้นที่ว่างในพื้นที่เก็บข้อมูล SQL ในเว็บ
แม้จะลบฐานข้อมูล Web SQL ไม่ได้ (แต่คงไม่น่าแปลกใจ) แต่คุณก็ควรเพิ่มพื้นที่ว่างโดยทิ้งตาราง SQL ในเว็บที่ล้าสมัยแล้วหลังจากที่ย้ายข้อมูลไปไว้ใน SQLite Wasm แล้ว หากต้องการแสดงตารางทั้งหมดในฐานข้อมูล 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 จากผู้ปฏิบัติงานหากใช้ระบบไฟล์ส่วนตัวต้นทางเป็นแบ็กเอนด์พื้นที่เก็บข้อมูล
ทดลองใช้
การสาธิตนี้ช่วยให้คุณสร้างฐานข้อมูล SQL ในเว็บด้วยข้อมูลตัวอย่าง แล้วส่งออกข้อมูล SQL ในเว็บเป็นคำสั่ง SQL ซึ่งต่อมาจะมีการนำเข้าไปยัง SQLite Wasm ที่ได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวที่เป็นต้นทาง สุดท้าย คุณจะเพิ่มพื้นที่ว่างได้โดยการลบข้อมูล Web SQL ที่ล้าสมัย ตรวจสอบซอร์สโค้ดเพื่อดูการติดตั้งใช้งานทั้งหมด รวมถึงไฟล์ mywebsqldump.js
ที่ได้รับการแพตช์
บทสรุป
คุณสามารถย้ายข้อมูลฐานข้อมูล SQL ในเว็บไปยัง SQLite Wasm ที่ได้รับการสนับสนุนโดยระบบไฟล์ส่วนตัวของต้นทางได้ด้วยวิธีที่โปร่งใสแก่ผู้ใช้ ผู้ใช้จะไม่สังเกตเห็นว่าขณะนี้ข้อมูลของตนโฮสต์อยู่ในระบบไฟล์ส่วนตัวที่เป็นต้นทางในฐานข้อมูล SQLite และจะไม่อยู่ใน Web SQL อีกต่อไป โดยรวมแล้ว การย้ายข้อมูลจาก Web SQL ไปยัง SQLite เป็นขั้นตอนที่จำเป็นสำหรับนักพัฒนาเว็บที่ต้องการดูแลให้แอปพลิเคชันของตนมีความเสถียรและความสามารถในการปรับขนาดในระยะยาว แม้ว่ากระบวนการนี้อาจต้องใช้ความพยายามเล็กน้อย แต่การใช้โซลูชันฐานข้อมูลที่มีประสิทธิภาพ มีความยืดหยุ่น และเหนือสิ่งอื่นใดคือโซลูชันฐานข้อมูลที่ประสบความสำเร็จในระยะยาว ทำให้คุ้มค่าต่อการลงทุน