Blazor 怎么操作浏览器本地存储

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

Blazor 操作浏览器本地存储,核心是借助

localStorage
sessionStorage
这两个 Web Storage API。Blazor WebAssembly(WASM)不能直接访问浏览器存储,必须通过 JavaScript 互操作(JS Interop)调用;而 Blazor Server 虽然运行在服务端,但也能通过 JS Interop 与客户端浏览器通信完成操作——所以两种模型都依赖 JS 互操作,只是实现方式略有差异。

用 Blazored.LocalStorage 快速上手(推荐)

这是最常用、最稳定的第三方封装库,屏蔽了 JS 互操作细节,提供强类型、异步友好的 C# 接口:

安装包:
dotnet add package Blazored.LocalStorage
Program.cs
中注册服务:
builder.Services.AddBlazoredLocalStorage();
在组件中注入使用:
@inject ILocalStorageService LocalStorage
存取示例:
await LocalStorage.SetItemAsync("theme", "dark");

var theme = await LocalStorage.GetItemAsync<string>("theme");</string>

手动 JS Interop 方式(无第三方依赖)

适合轻量场景或想完全掌控流程的项目:

wwwroot/index.html
 或底部添加简易 JS 工具函数:
<script>window.saveToStorage = (key, value) => localStorage.setItem(key, value);</script>

window.loadFromStorage = (key) => localStorage.getItem(key);
在 Blazor 组件中注入
IJSRuntime
@inject IJSRuntime JSRuntime
调用示例:
await JSRuntime.InvokeVoidAsync("saveToStorage", "userId", "123");

var userId = await JSRuntime.InvokeAsync<string>("loadFromStorage", "userId");</string>

区分 localStorage 和 sessionStorage

两者 API 完全一致,关键区别在生命周期和作用域:

localStorage:数据持久保存,关闭浏览器也不丢失,同一域名下所有标签页共享 sessionStorage:仅限当前标签页,关闭该标签页即清除,适合临时状态(如表单草稿、导航历史) Blazored.LocalStorage 默认操作 localStorage;如需 sessionStorage,可额外配置或手动 JS 调用
sessionStorage.setItem

注意安全与适用边界

本地存储不是保险柜,有明确限制:

只支持字符串值,存对象需先
JsonSerializer.Serialize
,读取后反序列化
容量约 5–10 MB(因浏览器而异),不适合存大文件或大量二进制数据 敏感信息(如 token、密码)不建议明文存 localStorage;生产环境推荐用 HttpOnly Cookie + 后端验证,或启用
ProtectedBrowserStorage
(仅 Server 端支持)
Blazor WASM 在私密/无痕模式下,localStorage 数据会在最后一个私密标签关闭时自动清空

基本上就这些。选 Blazored.LocalStorage 是多数项目的省心之选,手动 JS Interop 更适合教学、调试或极简集成。不需要引入复杂方案,就能稳稳把用户偏好、界面状态、轻量缓存落进浏览器里。

相关推荐