Blazor 怎么使用 IndexedDB

来源：这里教程网时间：2026-02-21 17:33:26 作者：

Blazor 本身不直接提供 IndexedDB API，但可以通过 JavaScript 互操作（JS Interop）在 Blazor WebAssembly 或 Blazor Server（需启用 JS 支持）中调用浏览器原生的 IndexedDB。核心思路是：C# 调用 JS 封装好的数据库操作函数，由 JS 层完成打开数据库、建表、事务、增删改查等全部逻辑。

准备基础 JS 封装

在

wwwroot/js/indexedDb.js

中写一个轻量封装，暴露清晰的方法接口：

initDb(name, version)
：初始化或升级数据库，自动创建 objectStore 和索引
add(storeName, data, key)
：向指定 store 添加数据
get(storeName, key)
：按主键查询单条
getAll(storeName)
：获取全部记录
delete(storeName, key)
：删除单条
searchByIndex(storeName, indexName, value)
：按索引快速查找

注意：所有方法都返回 Promise，确保与 C# 的

await

兼容。

在 Blazor 中注入并调用

创建一个 C# 服务类统一管理 JS 引用：

public class IndexedDbService
{
    private readonly IJSRuntime _jsRuntime;
    private IJSObjectReference _module;
<pre class="brush:php;toolbar:false;">public IndexedDbService(IJSRuntime jsRuntime) => _jsRuntime = jsRuntime;
public async Task InitializeAsync() =>
    _module = await _jsRuntime.InvokeAsync<IJSObjectReference>(
        "import", "./js/indexedDb.js");
public async Task AddAsync(string storeName, object data, object key = null) =>
    await _module.InvokeVoidAsync("add", storeName, data, key);
public async Task<T> GetAsync<T>(string storeName, object key) =>
    await _module.InvokeAsync<T>("get", storeName, key);
public async Task<T[]> GetAllAsync<T>(string storeName) =>
    await _module.InvokeAsync<T[]>("getAll", storeName);

}

在

Program.cs

中注册为 scoped 服务：

builder.Services.AddScoped<indexeddbservice>();</indexeddbservice>

组件中使用：

@inject IndexedDbService Db
<p>@code {
private async Task SaveUser()
{
await Db.InitializeAsync();
await Db.AddAsync("users", new { id = 1, name = "Alice", email = "a@example.com" });
}</p><pre class="brush:php;toolbar:false;">private async Task LoadUsers()
{
    var users = await Db.GetAllAsync<dynamic>("users");
    foreach (var u in users)
        Console.WriteLine(u.name);
}

}

关键注意事项

IndexedDB 在 Blazor 中不是“开箱即用”，容易踩坑：

版本升级必须显式触发：修改 objectStore 结构（如加字段、建新索引）时，要提高数据库版本号，并在
onupgradeneeded
中重建 schema 事务生命周期极短：JS 层每次操作都要新开事务，不能跨 await 持有 transaction 对象 二进制数据支持好：可直接存
Blob
或
ArrayBuffer
（比如图片），但 .NET 端传入需转为 base64 或 byte[] 后再交由 JS 处理错误必须监听：JS 层每个 request 都要绑定
onerror
，否则失败静默，C# 端收不到异常 存储上限因浏览器而异：Chrome 通常允许数百 MB，Safari 较保守（约 50–100MB），大文件建议分块或配合 Service Worker 缓存