使用 SQLite 在網路上高效處理所有儲存空間需求。
關於 SQLite
SQLite 相當熱門 開放原始碼、輕量的嵌入式關聯 和資料庫管理系統許多開發人員都會使用這個 API 將資料儲存在 採用結構化且易於使用的方式因為這個 Pod 不小且記憶體小 SQLite 通常做為行動裝置資料庫引擎使用 和網路瀏覽器。
SQLite 的主要特色之一 是採用無伺服器資料庫 因此不需要另外的伺服器程序即可運作。 資料庫儲存在使用者裝置上的單一檔案裡， 整合至應用程式中
以 Web Assembly 為基礎的 SQLite
許多非官方的 SQLite 版本是以 Web Assembly (Wasm) 為基礎 不但可以在網路瀏覽器中使用 sql.js。 sqlite3 WASM/JS 子專案是 一開始投入的心血是 SQLite 專案建立程式庫的 Wasm 版本 本系列課程將由受支援的 SQLite 交付項目組成成員。混凝土 這項專案的目標包括：
- 繫結低階 sqlite3 API，盡可能與 C1 十分接近 使用條款。
- 一種更高層級的物件導向 API，類似 sql.js 和 Node.js 樣式導入， 會直接對低階 API 進行對話這個 API 必須與 做為低階 API 的執行緒
- 以工作站為基礎的 API，會透過工作站訊息與先前的 API 交談。這個 一個用於在主執行緒中使用，低階 API 安裝在背景工作執行緒中，並透過工作站訊息與其通訊。
- 以 Promise 為基礎的 Worker API 變化版本，完全隱藏 使用者可以提供跨執行緒通訊功能
- 透過可用的 JavaScript API 支援永久的用戶端儲存空間， 包括來源私人檔案系統 (OPFS)。
搭配來源私人檔案系統持續性後端使用 SQLite Wasm
從 npm 安裝程式庫
安裝 @sqlite.org/sqlite-wasm 使用下列指令從 npm 封裝：
npm install @sqlite.org/sqlite-wasm
來源私人檔案系統
來源私人檔案系統 (OPFS，屬於 File System Access API) 特殊的介面，可為資料提供極高的存取效能。全新面貌 有別於現有伺服器，提供就地使用， 檔案的內容此次異動，並提供 修改項目，以及同步變化版本的可用性 大幅改善效能並支援新員工 用途
如您所想，專案目標的最後一個部分
彈性的用戶端儲存空間，並支援使用可用的 JavaScript API
對於資料庫檔案保存資料，嚴格的效能需求。
也就是原始私人檔案系統的位置
createSyncAccessHandle()敬上
方法是
FileSystemFileHandle。
都只是玩家在遊戲過程中這個方法會傳回 Promise，該 Promise 會解析為
FileSystemSyncAccessHandle敬上
物件，可用來同步讀取及寫入檔案。
這個方法的同步特性可帶來效能優勢，但
只能在專屬資料夾
網路工作站：
檔案，以免主執行緒遭到封鎖。
設定必要標頭
在其他檔案中，下載的 SQLite Wasm 封存檔會包含 sqlite3.js
和 sqlite3.wasm 檔案，這些檔案構成 sqlite3 WASM/JS 版本jswasm
目錄包含核心 sqlite3 交付項目和頂層目錄
內含示範和測試應用程式瀏覽器不會從以下來源提供 Wasm 檔案：
file:// 網址，因此您使用這個網址建構的所有應用程式都需要網路伺服器，且
伺服器在提供
檔案：
Cross-Origin-Opener-Policy敬上 設為same-origin指令、 只會將瀏覽內容隔離在相同來源文件上。 跨來源文件不會在同一個瀏覽環境中載入。Cross-Origin-Embedder-Policy敬上 設為require-corp指令、 因此文件只能載入相同來源或來源的資源 明確標示為可從其他來源載入
這類標頭的原因是 SQLite Wasm 必須依賴
SharedArrayBuffer、
並設定這些標頭
安全性需求。
使用開發人員工具檢查流量時，您會發現以下事項： 每個 ACL 都由一或多個項目組成 而這些項目包含兩項資訊
速度測試
SQLite 團隊已針對 WebAssembly 實作項目執行一些基準測試 與已淘汰的 Web SQL 相比這些基準測試顯示 SQLite Wasm 速度通常和 Web SQL 一樣快有時速度會慢一點 作業速度會稍微快一點詳情請參閱 結果網頁。
入門程式碼範例
如前所述，SQLite Wasm 與來源私人檔案系統 持續性後端需要從工作站內容執行。好消息是 這個程式庫會自動處理所有上述作業 直接在主執行緒中完成
import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';
(async () => {
try {
console.log('Loading and initializing SQLite3 module...');
const promiser = await new Promise((resolve) => {
const _promiser = sqlite3Worker1Promiser({
onready: () => {
resolve(_promiser);
},
});
});
console.log('Done initializing. Running demo...');
let response;
response = await promiser('config-get', {});
console.log('Running SQLite3 version', response.result.version.libVersion);
response = await promiser('open', {
filename: 'file:worker-promiser.sqlite3?vfs=opfs',
});
const { dbId } = response;
console.log(
'OPFS is available, created persisted database at',
response.result.filename.replace(/^file:(.*?)\?vfs=opfs$/, '$1'),
);
await promiser('exec', { dbId, sql: 'CREATE TABLE IF NOT EXISTS t(a,b)' });
console.log('Creating a table...');
console.log('Insert some data using exec()...');
for (let i = 20; i <= 25; ++i) {
await promiser('exec', {
dbId,
sql: 'INSERT INTO t(a,b) VALUES (?,?)',
bind: [i, i * 2],
});
}
console.log('Query data with exec()');
await promiser('exec', {
dbId,
sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
callback: (result) => {
if (!result.row) {
return;
}
console.log(result.row);
},
});
await promiser('close', { dbId });
} catch (err) {
if (!(err instanceof Error)) {
err = new Error(err.result.message);
}
console.error(err.name, err.message);
}
})();
示範
請參閱示範，瞭解上述程式碼的實際運作方式。 請務必參閱 原始碼 。請注意，下方的嵌入版本並未使用 OPFS 後端， 但當你在 不同分頁，
對來源私人檔案系統偵錯
如要對 SQLite Wasm 的來源私人檔案系統輸出內容進行偵錯，請使用 OPFS Explorer Chrome 擴充功能，
安裝擴充功能後，開啟 Chrome 開發人員工具，然後選取 OPFS 「Explorer」」分頁標籤，列出寫入作業的 SQLite Wasm 寫入項目，供您檢查 來源私人檔案系統。
在開發人員工具中，點選「OPFS Explorer」視窗中的任何檔案 以儲存至本機磁碟之後即可使用 SQLite 檢視者檢查資料庫，因此您可以 請務必確保您瞭解 SQLite Wasm 的實際運作方式符合承諾。
取得協助與提供意見
SQLite Wasm 是由 SQLite 社群開發及維護。取得協助並 提供意見回饋，方法是在 支援論壇。完整 說明文件請參閱 SQLite 網站。
特別銘謝
主頁橫幅由 Tobias Fischer 提供 Unsplash。