SQLite Wasm 是由來源私人檔案系統提供支援，能為已淘汰的網路 SQL 資料庫技術提供多元化的替代功能。本文說明如何將資料從 Web SQL 遷移至 SQLite Wasm。
必要背景
淘汰及移除 Web SQL 一文已宣布淘汰網路 SQL 資料庫技術。雖然這項技術本身可能已淘汰，但這類技術所解決的用途非常多，因此在接下來的文章中，來源私人檔案系統支援的 SQLite Wasm 文章說明瞭以 SQLite 資料庫為基礎的替換技術組合、編譯為網路 Assembly (Wasm)，並由來源私人檔案系統提供支援。以下文章將說明，如何從 Web SQL 將資料庫遷移至 SQLite Wasm。
遷移資料庫
下列四個步驟示範了將 Web SQL 資料庫遷移至 SQLite Wasm 的概念概念，也就是由來源私人檔案系統支援的 SQLite 資料庫。這項資源可做為您自訂程式碼的基礎，依據「您的」網路 SQL 遷移需求自訂。
要遷移的網路 SQL 資料庫
本遷移指南的基準假設僅有一個 (或多個) 現有的 Web SQL 資料庫，其中包含與您的應用程式相關的資料。在下方螢幕截圖中，有一個名為 mydatabase 的資料庫範例，其中有雨季表列出各種情緒與嚴重程度。Chrome 開發人員工具可讓您查看用於偵錯的 Web SQL 資料庫，如以下螢幕截圖所示。
將網路 SQL 資料庫轉譯為 SQL 陳述式
如要以對使用者清楚易懂的方式遷移資料，也就是他們不需要自行執行遷移步驟，就必須將資料庫中的資料轉譯回原先建立這些內容的原始 SQL 陳述式。已有前所未有的挑戰，本文中使用的遷移指令碼 (mywebsqldump.js) 是以名為 websqldump.js 的社群資料庫為基礎，但有些許調整。下列程式碼範例顯示將 Web 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
目前所有程序仍會在 SQLite Wasm 環境中執行這些 SQL 指令。如需有關設定 SQLite Wasm 的詳細資訊，請參閱「來源私人檔案系統支援的瀏覽器中的 SQLite Wasm」一文，但請參閱下方的說明。請記住，此程式碼必須在 Worker (程式庫會自動為您建立) 中執行，並正確設定必要 HTTP 標頭。您可以從 npm 安裝 @sqlite.org/sqlite-wasm 套件。
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 擴充功能檢查匯入的資料庫檔案。現在有兩個檔案，一個包含實際資料庫，另一個包含日誌資訊。請注意，這兩個檔案位於來源私人檔案系統中，因此您必須使用 OPFS Explorer 擴充功能才能看到。
如要實際確認匯入的資料是否和初始 Web SQL 資料相同，請按一下檔案 mydatabase.db，OPFS Explorer 擴充功能會顯示「Save File」對話方塊，讓您將檔案儲存在使用者可見的檔案系統中。儲存資料庫檔案後，請使用 SQLite 檢視器應用程式探索資料。Project Fugu API 展示區提供多個可以在瀏覽器中使用 SQLite 的應用程式。舉例來說，「Sqlime — SQLite Playground」可讓您從硬碟開啟 SQLite 資料庫檔案，並在資料庫中執行查詢。如下方的螢幕截圖所示，腦力激盪資料表已正確匯入 SQLite。
釋出 Web SQL 儲存空間
雖然您無法刪除 Web SQL 資料庫，但您還是應該在將資料遷移至 SQLite Wasm 後，捨棄現在過時的網頁 SQL 資料表，藉此釋放部分儲存空間。如要列出網路 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 資料庫，然後將 Web SQL 資料轉儲為 SQL 陳述式。接下來，這些陳述式會匯入來源私人檔案系統支援的 SQLite Wasm。最後，系統會刪除過時的網路 SQL 資料，以釋出儲存空間。請參閱原始碼瞭解完整實作內容，包括修補的 mywebsqldump.js 檔案。
結論
將網路 SQL 資料庫遷移至由來源私人檔案系統支援的 SQLite Wasm，可向使用者公開透明。使用者不會發現自己的資料目前存放在 SQLite 資料庫的來源私人檔案系統中，不再儲存於 Web SQL。整體而言，網路開發人員若希望確保應用程式的穩定性和擴充性長期穩定，就必須從 Web SQL 遷移至 SQLite。雖然整個程序可能需要一開始就完成，但由於資料庫解決方案更強大、有彈性且能因應未來變化，它具有前瞻性，因此值得投資。