如何在 Blazor 中使用本地存储

• 从Github下载源代码

引言

本地存储是现代 Web 浏览器中可用的键值数据结构，它使应用程序能够将数据存储在浏览器的内存中。即使在用户关闭浏览器或导航离开页面后，这些数据也会保留。它充当非敏感静态数据的临时存储解决方案，可减少服务器负载，并通过最小化服务器调用来提高性能。

背景

Blazor 应用程序可以使用 JavaScript 互操作访问本地存储，从而实现与基于浏览器的存储的无缝集成。在本文中，我们将探讨 Blazor 如何利用本地存储来增强用户体验并优化应用程序性能。

演示

这是最终产品的演示，您可以看到 Blazor 如何利用本地存储

这里发生了什么？

我们正在开发一个应用程序来演示本地存储的使用。我们的目标是展示如何有效地从本地存储添加、更新和删除数据。为了实现这一点，我设计了一个简单的表单，其中包含三个按钮，如上面的演示所示。我们的应用程序管理一个编程语言列表，包括 名称、创建者和 年份等字段。

它是如何工作的：

• 添加数据：用户填写包含必要详细信息的表单，然后单击 保存 按钮将条目添加到本地存储。
• 检索记录：要获取记录，用户需要提供一个键，该键通常是编程语言的名称。然后，他们单击 加载 按钮以检索相应的数据。
• 删除条目：要删除条目，用户只需单击 删除 按钮。本地存储将删除与提供的键关联的记录。
• 更新条目：用户可以通过输入语言名称来更新现有条目，之后他们可以编辑创建者或年份字段。如果语言名称已存在，本地存储将更新现有条目，否则将创建一个新条目。

LocalStorage 服务

让我们首先创建一个服务来封装本地存储功能。LocalStorageService 类通过 JavaScript 促进与浏览器本地存储的交互。

using Microsoft.JSInterop;

namespace BlazingLocalStorage.LocalStorage
{
    public class LocalStorageService
    {
        private readonly IJSRuntime _jsRuntime;

        public LocalStorageService(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }

        public async Task AddItem(string key, string value)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, value);
        }

        public async Task RemoveItem(string key)
        {
            await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
        }

        public async Task<string> GetItem(string key)
        {
            return await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
        }
    }
}

列表 1 的说明

• 构造函数：使用 IJSRuntime 的实例初始化 LocalStorageService 类。
• AddItem 方法：使用 JavaScript 的 localStorage.setItem(key, value) 函数将项目添加到本地存储。
• RemoveItem 方法：使用 JavaScript 的 localStorage.removeItem(key) 函数从本地存储中删除项目。
• GetItem 方法：使用 JavaScript 的 localStorage.getItem(key) 函数从本地存储中检索项目。

为了表示我们的表单字段，让我们创建一个名为 ProgrammingLanguage 的模型。

public class ProgrammingLanguage
{
        public string Name { get; set; }
        public string Creator { get; set; }
        public int Year { get; set; }
}

ProgrammingLanguage 服务

ProgrammingLanguageService 充当 UI 和本地存储服务之间的中介。它管理存储在本地存储中的编程语言，并提供添加、检索和删除语言条目的方法。

using System.Text.Json;

namespace BlazingLocalStorage.LocalStorage
{
    public class ProgrammingLanguageService
    {
        private readonly LocalStorageService _localStorageService;

        public ProgrammingLanguageService(LocalStorageService localStorageService)
        {
            _localStorageService = localStorageService;
        }

        public async Task AddOrUpdateLanguageAsync
               (string languageName, ProgrammingLanguage languageToAdd)
        {
            var jsonLanguage = JsonSerializer.Serialize(languageToAdd);
            await _localStorageService.AddItem(languageName, jsonLanguage);
        }

        public async Task DeleteLanguageAsync(string languageName)
        {
            await _localStorageService.RemoveItem(languageName);
        }

        public async Task<ProgrammingLanguage> GetLanguageAsync(string languageName)
        {
            ProgrammingLanguage language = null; ;
            var jsonLanguage = await _localStorageService.GetItem(languageName);
            if (jsonLanguage != null)
            {
                language = JsonSerializer.Deserialize<ProgrammingLanguage>(jsonLanguage);
            }

            return language;
        }
    }
}

• AddOrUpdateLanguageAsync 方法：将编程语言条目添加或更新到本地存储。它调用 LocalStorageService 的 AddItem 方法来添加或更新本地存储中的编程语言。它必须先将 languageToAdd 对象序列化为 JSON，然后将其作为参数传递给 AddItem 方法。
• DeleteLanguageAsync 方法：它调用 LocalStorageService 的 RemoveItem 方法，该方法从本地存储中删除编程语言。
• GetLanguageAsync 方法：它调用 LocalStorageService 的 GetItem 方法，该方法根据提供的 languageName 从本地存储中检索编程语言。然后，我们需要将 JSON 反序列化为 ProgrammingLanguage 对象。

组件

UI 组件 LanguageManagement.razor 使用户能够添加、编辑和删除编程语言条目。它与 ProgrammingLanguageService 交互以无缝执行这些操作。

@page "/"
@using LocalStorage
@inject ProgrammingLanguageService LanguageService

<div class="row">
    <div class="col-md-4">
        <h3>Add, Edit or Remove Language</h3>
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" 
                @bind="Language.Name" id="name" />
        </div>
        <div class="form-group">
            <label for="creator">Creator:</label>
            <input type="text" class="form-control" 
                @bind="Language.Creator" id="creator" />
        </div>
        <div class="form-group">
            <label for="year">Year:</label>
            <input type="text" class="form-control" 
                @bind="Language.Year" id="year" />
        </div>
        <div class="form-group mt-3">
            <button class="btn btn-primary" @onclick="SaveLanguage">Save</button>
            <button class="btn btn-danger" @onclick="DeleteLanguage">Delete</button>
            <button class="btn btn-secondary" @onclick="LoadLanguage">Load</button>
        </div>
    </div>
</div>

@code {
    private ProgrammingLanguage Language = new ProgrammingLanguage();

    private async void SaveLanguage()
    {
        await LanguageService.AddOrUpdateLanguageAsync
                              (Language.Name, new ProgrammingLanguage()
        {
            Name = Language.Name,
            Creator = Language.Creator,
            Year = Language.Year
        });
    }

    private async void DeleteLanguage()
    {
        await LanguageService.DeleteLanguageAsync(Language.Name);
        Language.Name = Language.Creator = string.Empty;
        Language.Year = 0;
    }

    private async void LoadLanguage()
    {
        Language = await LanguageService.GetLanguageAsync(Language.Name);
        StateHasChanged();
    }
}

• 组件路由和注入：代码的前三行指定了组件的路由以及 ProgrammingLanguageService 所在的命名空间。此外，您还需要将 ProgrammingLanguageService 注入到组件中。
• HTML 标记：HTML 标记定义了一个表单，其中包含用于输入编程语言的名称、创建者和年份的输入字段。它还包含用于保存、删除和加载语言的按钮。
• @code 块:
  • Language 对象保存正在表单中操作的编程语言的数据。
  • 当用户单击 保存 按钮时，将调用 SaveLanguage 方法。它调用 ProgrammingLanguageService 的 AddOrUpdateLanguageAsync 方法来将语言添加或更新到本地存储。
  • 当用户单击 删除 按钮时，将调用 DeleteLanguage 方法。它调用 ProgrammingLanguageService 的 DeleteLanguageAsync 方法以从本地存储中删除语言。
  • 当用户单击 加载 按钮时，将调用 LoadLanguage 方法。它调用 ProgrammingLanguageService 的 GetLanguageAsync 方法以从本地存储中检索语言，并使用其数据填充表单字段。

UI 看起来像下面的图像 1

结论

本地存储完全在客户端运行，减少了获取或更新数据的频繁服务器调用的需求。这使其成为存储需要在会话之间访问的用户偏好、应用程序设置、主题偏好、语言偏好和显示选项的理想选择。

现在我们知道了什么可以存储在本地存储中，了解什么不能存储也很重要。本地存储不是用于存储密码、信用卡详细信息或个人信息等敏感或机密信息的安全存储解决方案。

通过利用 Blazor 应用程序中的本地存储，您可以增强用户体验。正确使用本地存储可以显著提高 Web 应用程序的响应能力。

历史

• 2024 年 2 月 5 日：初始版本