如何在 Blazor WASM 中讀取/導入一個 Sqlite 數據庫？

Question

它甚至可行嗎？ 我所能找到的只是如何讓它從應用程序內部運行，沒有任何方法可以導入文件，這將是一個byte[]文件並制作它，以便可以實例化客戶端並在其上讀/寫（在記憶中）。

Answer 1

這是可能的，但不是很可行，因為根據我的拙劣實驗，當你添加更多 data.tables 時，它會導致現在一些奇怪的行為/錯誤。

首先，您通過 HTTP 調用將文件讀取為 stream，並將其轉換為 base64 字符串，如下所示：

var stream = await Http.GetStreamAsync("sqlite.db"); // file in the wwwroot
var buffer = new byte[stream.Length];
using var ms = new MemoryStream(buffer, 0, buffer.Length);
await stream.CopyToAsync(ms);

string base64 = Convert.ToBase64String(ms.ToArray());
await JS!.InvokeVoidAsync("fn.writeToCache", base64);

然后，這是JavaScript function 的實現：

window.fn = {
  writeToCache: async function (buffer) {
    const cachePath = `/data/cache/sqlite.db`;
    const cache = await caches.open('your-cache-name');
    const resp = await cache.match(cachePath);

    if (resp && resp.ok) {
      return false;
    } 

    const fileUrl = "data:application/octet-stream;base64," + buffer;
    const res = await fetch(fileUrl);
    const blob = await res.blob();

    const headers = new Headers({
      'content-length': blob.size
    });

    const response = new Response(blob, {
      headers
    });

    await cache.put(cachePath, response);

    console.log("Data cached.");

    location.Reload(); // Necessary step to be able to see the cache
  }
}

只是一些額外的注意事項：

/** Available only in secure contexts. */
declare var caches: CacheStorage; // <-- HTTPS only
declare var crossOriginIsolated: boolean;
declare var crypto: Crypto;
declare var indexedDB: IDBFactory;
// ...

• 安全上下文：此功能僅在安全上下文 (HTTPS) 中可用，在某些或所有支持的瀏覽器中可用。

• 標頭：緩存 API 不支持 HTTP 緩存標頭。

• 密鑰匹配密鑰匹配算法取決於值中的VARY header 。 因此，匹配一個新鍵需要同時查看Cache object 中條目的鍵和值。因此，請確保按名稱對緩存進行版本控制，並僅使用它們可以安全操作的腳本版本中的緩存。 這是Mozilla的一個示例，說明如何通過 vanilla JavaScript擺脫舊緩存： 刪除舊緩存