Blazor LocalStorage 和 SessionStorage 使用方法

技术教程
2025-12-23 00:05:37

Blazor中LocalStorage/SessionStorage使用分三种：Blazor Server用ProtectedBrowserStorage（自动加密、仅LocalStorage）；WebAssembly推荐Blazored.LocalStorage（支持两者、泛型序列化）；轻量需求可手写JS互操作。

blazor localstorage 和 sessionstorage 使用方法

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# 调用。适用于两种托管模型，但需自行处理序列化和错误。

95Shop仿醉品商城

95Shop可以免费下载使用，是一款仿醉品商城网店系统，内置SEO优化，具有模块丰富、管理简洁直观，操作易用等特点，系统功能完整，运行速度较快，采用ASP.NET(C#)技术开发，配合SQL Serve2000数据库存储数据，运行环境为微软ASP.NET 2.0。95Shop官方网站定期开发新功能和维护升级。可以放心使用！安装运行方法 1、下载软件压缩包； 2、将下载的软件压缩包解压缩，得到we

0 查看详情 95Shop仿醉品商城

在 wwwroot/index.html（WASM）或 Pages/_Host.cshtml（Server）的 <script></script> 中添加：

window.store = {<br>  s*eL: (key, data) => localStorage.setItem(key, data),<br>  loadL: (key) => localStorage.getItem(key),<br>  s*eS: (key, data) => sessionStorage.setItem(key, data),<br>  loadS: (key) => sessionStorage.getItem(key)<br>};

C# 中调用（例如在组件里）：
@inject IJSRuntime JSRuntime
await JSRuntime.InvokeVoidAsync("store.s*eL", "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 互操作。

以上就是Blazor LocalStorage 和 SessionStorage 使用方法的详细内容，更多请关注其它相关文章！