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;public IndexedDbService(IJSRuntime jsRuntime) => _jsRuntime = jsRuntime;public async Task InitializeAsync() => _module = await _jsRuntime.InvokeAsync( "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 GetAsync(string storeName, object key) => await _module.InvokeAsync("get", storeName, key);public async Task GetAllAsync(string storeName) => await _module.InvokeAsync("getAll", storeName);
}
在 Program.cs 中注册为 scoped 服务：builder.Services.AddScoped();
组件中使用：
@inject IndexedDbService Db@code {private async Task SaveUser(){await Db.InitializeAsync();await Db.AddAsync("users", new { id = 1, name = "Alice", email = "a@example.com" });}
private async Task LoadUsers(){ var users = await Db.GetAllAsync("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 缓存
替代方案参考
如果只是存用户设置、token、小对象，localStorage 更简单高效；若需离线同步、多条件查询、大量结构化数据（如待办列表+附件+标签+时间范围筛选），IndexedDB 是唯一合理选择。也可组合使用：用 localStorage 存访问令牌，用 IndexedDB 存业务数据。
基本上就这些。
以上就是Blazor 怎么使用 IndexedDB的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1443068.html
微信扫一扫 
支付宝扫一扫 
