從網路 SQL 到 SQLite Wasm：資料庫遷移指南

SQLite Wasm 由原始私人檔案系統支援，可取代已淘汰的 Web SQL 資料庫技術。本文是從 Web SQL 將資料遷移至 SQLite Wasm 的指南。

Thomas Steiner

必要的背景

我們在「淘汰並移除 WebSQL」一文中宣布淘汰 WebSQL 資料庫技術。雖然這項技術本身可能已淘汰，但這項技術所解決的用途並未淘汰，因此後續文章「瀏覽器中的 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 設定的所有詳細資訊，請參閱「Origin 私人檔案系統支援的瀏覽器中的 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 展示區提供多個可在瀏覽器中使用 SQLite 的應用程式。舉例來說，您可以使用 Sqlime - SQLite Playground 從硬碟開啟 SQLite 資料庫檔案，並在資料庫上執行查詢。如以下螢幕截圖所示，暴雨資料表已正確匯入 SQLite。

釋放 Web SQL 儲存空間

雖然無法刪除 Web SQL 資料庫 (這可能讓您感到意外)，但在將資料遷移至 SQLite Wasm 後，您仍應刪除現已淘汰的 Web SQL 資料表，以釋出一些儲存空間。如要列出 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 資料庫，然後將網路 SQL 資料傾印為 SQL 陳述式。接下來，該陳述式會匯入由來源私人檔案系統支援的 SQLite Wasm。最後，您可以刪除過時的 Web SQL 資料，藉此釋出儲存空間。請查看原始碼，瞭解完整實作方式，包括已修補的 mywebsqldump.js 檔案。

結論

您可以透過透明的方式，將 Web SQL 資料庫遷移至由來源私人檔案系統支援的 SQLite Wasm。客戶不會注意到他們的資料現在託管在 SQLite 資料庫的來源私人檔案系統中，且不再存在於 Web SQL 中。總體而言，如果網頁開發人員希望確保應用程式的長期穩定性和可擴充性，就必須從 Web SQL 遷移至 SQLite。雖然這個程序可能需要一些初始作業，但更強大、更彈性且最重要的是能因應未來需求的資料庫解決方案，絕對值得您投資。