隨著 SQLite Wasm 由來源私人檔案系統提供支援，您就可以輕鬆取代已淘汰的 Web SQL 資料庫技術。本文提供指南，說明如何將資料從 Web SQL 遷移至 SQLite Wasm。
必要的背景
「淘汰及移除 Web SQL」這篇文章宣布淘汰 Web SQL 資料庫技術。雖然技術本身可能已淘汰，但這項技術所處理的用途並不多，因此後續追蹤文章僅提到 來源私人檔案系統支援瀏覽器中的 SQLite Wasm 後，接下來會概略介紹以 SQLite 資料庫編譯為 Web Assembly (Wasm) 技術的技術，並且由來源私人檔案系統提供支援的技術。為解決這個問題，本文將說明如何將資料庫從 Web SQL 遷移至 SQLite Wasm。
遷移資料庫
下列四個步驟將示範將 Web SQL 資料庫遷移至 SQLite Wasm 的概念概念，並採用由原始私人檔案系統支援的 SQLite 資料庫。這可以做為您自訂程式碼的基礎，進而滿足您的 Web SQL 遷移需求。
要遷移的 Web 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」一文，相關要點現在再見。請記住，此程式碼必須在工作站 (由程式庫自動為您建立)，並正確設定必要的 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 開發人員工具擴充功能檢查匯入的資料庫檔案。目前有兩個檔案，一個包含實際的資料庫，另一個包含日誌資訊。請注意，這兩個檔案都存放在來源私人檔案系統中，因此您必須使用 OPFS Explorer 擴充功能才能查看這些檔案。
如要驗證匯入的資料是否與初始 Web SQL 資料相同，請按一下檔案 mydatabase.db，OPFS Explorer 擴充功能將顯示「Save File」對話方塊，讓您將檔案儲存到使用者可檢視的檔案系統中。儲存資料庫檔案後，請使用 SQLite 檢視器應用程式探索資料。Project Fugu API Showcase 包含數個能夠在瀏覽器中使用 SQLite 的應用程式。舉例來說，Sqlime — SQLite Playground 可讓您開啟硬碟中的 SQLite 資料庫檔案，並在資料庫中執行查詢。如以下螢幕截圖所示，暴雨資料表已正確匯入 SQLite。
釋出網路 SQL 儲存空間
雖然無法刪除 Web SQL 資料庫，但將資料遷移至 SQLite Wasm 後，您仍應捨棄現已淘汰的 Web 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。
測試
這個示範可讓您使用範例資料填入 Web SQL 資料庫，然後將網路 SQL 資料傾印為 SQL 陳述式。接下來，該陳述式會匯入由來源私人檔案系統支援的 SQLite Wasm。最後，您可以刪除過時的 Web SQL 資料，藉此釋出儲存空間。查看原始碼以瞭解完整實作，包括修補的 mywebsqldump.js 檔案。
結論
使用者可以清楚瞭解，您可以將 Web SQL 資料庫遷移至由來源私人檔案系統支援的 SQLite Wasm。客戶不會注意到他們的資料現在存放在 SQLite 資料庫的來源私人檔案系統中，而不再存放於 Web SQL。整體而言，對於想確保應用程式可維持長期穩定性和擴充性的網頁開發人員，從 Web SQL 遷移至 SQLite 是必要步驟。雖然這項程序可能需要初步的工夫，但最重要的是更加強大、靈活且符合前瞻性的資料庫解決方案，因此值得投資。