Blazor 怎么使用 IndexedDB

Blazor 通过 JavaScript 互操作调用 IndexedDB，需在 JS 中封装 initDb、add、get 等方法并返回 Promise，C# 端用 IndexedDbService 封装调用，注意版本升级、事务短暂、错误监听及存储限制。

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>

标签： javascript java js 浏览器 safari ai c# .net