Blazor LocalStorage 和 SessionStorage 使用方法

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

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

标签： html js json 浏览器 端口 session 后端 ai win microsoft 微软 c# .net s