掌握Blazor本地存储操作（从零开始实现浏览器数据持久化）

什么是本地存储？

本地存储（Local Storage） 是浏览器提供的一种持久化存储机制，它允许网站在用户的浏览器中保存键值对数据。与 Cookie 不同，本地存储的数据不会随每次请求发送到服务器，且容量更大（通常为5MB以上），非常适合保存用户偏好、登录状态或临时数据。

为什么要在 Blazor 中使用本地存储？

在 Blazor WebAssembly 应用中，由于所有代码都在客户端运行，使用本地存储可以：

• 保存用户设置（如主题、语言）
• 缓存 API 响应以提升性能
• 实现离线功能
• 记住用户登录状态（配合安全措施）

准备工作：安装必要的 NuGet 包

Blazor 本身不直接提供本地存储的 API，但我们可以借助 Microsoft.JSInterop 调用 JavaScript 的 localStorage。不过，为了简化操作，推荐使用社区维护的 Blazored.LocalStorage 库。

在你的 Blazor WebAssembly 项目根目录下，打开终端并运行：

dotnet add package Blazored.LocalStorage  

配置服务

打开 Program.cs 文件（或 Startup.cs，取决于项目版本），注册本地存储服务：

using Blazored.LocalStorage;var builder = WebApplication.CreateBuilder(args);// 添加服务builder.Services.AddBlazoredLocalStorage();var app = builder.Build();// 其他配置...app.Run();  

在组件中使用本地存储

现在你可以在任意 Razor 组件（如 Counter.razor 或自定义页面）中注入并使用 ILocalStorageService。

下面是一个完整的示例，演示如何保存和读取一个用户的名字：

@page "/user-profile"@inject ILocalStorageService LocalStorage<h3>用户资料</h3><div>    <label>请输入您的名字：</label>    <input @bind="userName" />    <button @onclick="SaveName">保存到本地存储</button></div><div style="margin-top: 10px;">    <button @onclick="LoadName">从本地存储加载名字</button>    <p>当前名字：@displayName</p></div>@code {    private string userName = "";    private string displayName = "(未加载)";    private async Task SaveName()    {        await LocalStorage.SetItemAsync("UserName", userName);    }    private async Task LoadName()    {        var name = await LocalStorage.GetItemAsync<string>("UserName");        displayName = name ?? "(未设置)";    }}  

常用方法说明

ILocalStorageService 提供了以下核心方法：

• SetItemAsync<T>(string key, T value)：保存任意类型数据（自动序列化为 JSON）
• GetItemAsync<T>(string key)：读取指定键的值
• RemoveItemAsync(string key)：删除某个键
• ClearAsync()：清空所有本地存储数据

注意事项

• 本地存储仅支持字符串，但 Blazored.LocalStorage 会自动处理对象的序列化/反序列化
• 不要存储敏感信息（如密码、令牌），因为本地存储容易被 XSS 攻击窃取
• 如果用户禁用了本地存储，操作会抛出异常，建议加上 try-catch 处理

结语

通过本教程，你应该已经掌握了在 Blazor WebAssembly 中使用 本地存储 的基本方法。无论是保存用户偏好还是实现简单的离线功能，这项技能都将成为你开发 Blazor 教程 项目的重要工具。赶快动手试试吧！

如果你觉得这篇文章对你有帮助，欢迎分享给其他正在学习 Blazor本地存储 的开发者！