Blazor LocalStorage 和 SessionStorage 使用方法

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

Blazor 中使用 LocalStorage 和 SessionStorage 很简单,核心是借助

Microsoft.JSInterop
调用浏览器原生 API。.NET 6+ 官方已提供轻量封装(
Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
),但要注意它只适用于 Blazor Server,且默认加密;而 Blazor WebAssembly 需自行封装 JS 互操作或使用社区库(如
Blazored.LocalStorage
)。

Blazor Server:用 ProtectedBrowserStorage(自动加密)

这是微软为 Blazor Server 提供的内置方案,数据存入浏览器 LocalStorage 但会自动加密,适合存敏感度中等的信息(如用户偏好、临时 token)。它不支持 SessionStorage,仅 LocalStorage。

Program.cs
(.NET 6+)中注册服务:
builder.Services.AddProtectedBrowserStorage();
在组件中注入并使用:
@inject ProtectedLocalStorage Storage

读取:
var value = await Storage.GetAsync<string>("key");</string>

写入:
await Storage.SetAsync("key", "value");

删除:
await Storage.DeleteAsync("key");
注意:该服务依赖服务器端密钥保护,不能跨不同 Blazor Server 实例共享密钥,也不适用于 WebAssembly。

Blazor WebAssembly:推荐 Blazored.LocalStorage

这是最主流、维护活跃的第三方库,同时支持 LocalStorage 和 SessionStorage,API 清晰,且兼容 .NET 5/6/7/8。

安装 NuGet 包:
Blazored.LocalStorage
Program.cs
注册:
builder.Services.AddBlazoredLocalStorage();
(加在
AddWasmHostedServices()
后)
组件中使用:
@inject ILocalStorageService LocalStorage<br>@inject ISessionStorageService SessionStorage

存值:
await LocalStorage.SetItemAsStringAsync("theme", "dark");

取值:
var theme = await LocalStorage.GetItemAsStringAsync("theme");

同理替换
LocalStorage
SessionStorage
即可操作会话级存储
支持泛型序列化(自动 JSON 序列化对象),也提供同步方法(如
SetItemAsString
不带 Async 后缀,但不推荐在主线程阻塞调用)。

手动 JS 互操作(通用,适合轻量需求)

如果不想引入额外包,可手写 JS 函数 + C# 调用。适用于两种托管模型,但需自行处理序列化和错误。

wwwroot/index.html
(WASM)或
Pages/_Host.cshtml
(Server)的
<script></script>
中添加:
window.store = {<br>  saveL: (key, data) => localStorage.setItem(key, data),<br>  loadL: (key) => localStorage.getItem(key),<br>  saveS: (key, data) => sessionStorage.setItem(key, data),<br>  loadS: (key) => sessionStorage.getItem(key)<br>};
C# 中调用(例如在组件里):
@inject IJSRuntime JSRuntime

await JSRuntime.InvokeVoidAsync("store.saveL", "counter", "42");

var val = await JSRuntime.InvokeAsync<string>("store.loadL", "counter");</string>
注意:传对象时需先
JsonSerializer.Serialize
,取值后要
JsonSerializer.Deserialize<t></t>
;建议加 try-catch 处理浏览器禁用存储的情况。

注意事项与最佳实践

无论哪种方式,都要留意浏览器限制和用户体验边界。

大小限制:通常 5–10 MB,超出会抛
QuotaExceededError
,建议写入前检查或降级处理(如只存 ID,数据放后端)
同源策略:LocalStorage/SessionStorage 严格按协议+域名+端口隔离,localhost:5000 和 localhost:5001 互不可见 隐私模式:部分浏览器在无痕窗口中可能禁用或清空存储,需有 fallback 逻辑(如默认值) 敏感信息:不要存密码、完整 token(尤其是 refresh token);LocalStorage 比 SessionStorage 更不安全(持久存在,易被 XSS 窃取) 响应式更新:原生存储变更不会通知 Blazor 组件重绘,如需监听变化,可用
window.addEventListener('storage', ...)
手动触发 StateHasChanged()

基本上就这些。选方案时优先考虑项目类型:Server 用

ProtectedBrowserStorage
省心;WebAssembly 直接上
Blazored.LocalStorage
;极简场景或教学演示可手写 JS 互操作。

相关推荐