ASP.NET Core Blazor跨页保存用户输入及专属存储的最优方案咨询

1. 跨页面/刷新的数据持久化实现 #

• 前端临时保留：使用Blazor内置的PersistentComponentState，在页面刷新时自动保存/恢复组件状态；若需跨浏览器会话，可结合加密后的localStorage（仅存储非敏感数据，敏感数据必须加密）。
• 页面切换同步：通过Scoped全局状态服务（如UserInputState）存储所有页面输入值，Blazor单页路由切换时状态不会丢失；刷新前触发后端同步，确保数据留存。

2. 服务器端安全高效存储方案 #

推荐方案：数据库持久化（长期存储/计算场景） #

• 设计UserInput表，用UserId作为外键绑定登录用户，字段包含PageKey（页面标识）、InputName（输入框名称）、InputValue（输入值）、LastUpdated（更新时间）。
• 安全措施：
  • 后端接口添加[Authorize]属性，仅允许登录用户访问；
  • 敏感输入值用ASP.NET Core Data Protection API加密存储；
  • 查询数据时始终过滤当前用户的UserId，确保数据隔离。

临时存储方案：分布式缓存（Redis）+ Session（草稿场景） #

• 配置ASP.NET Core Session使用Redis分布式缓存，避免单服务器局限；
• Session基于用户身份Cookie隔离，仅存储未提交的临时输入，设置合理过期时间（如30分钟）。

3. 前后端数据关联维护 #

• 前端全局状态服务：注册Scoped的UserInputState服务，统一管理所有页面的输入值，输入框通过@bind绑定到服务中的对应字段。
• 同步机制：
  • 页面初始化时，从后端API拉取当前用户对应页面的历史数据，填充到状态服务；
  • 输入值变化时（或页面切换/刷新前），调用后端API将状态服务中的数据同步到数据库/缓存。

4. 方案对比与替代选择 #

示例代码片段 #

1. 全局输入状态服务

public class UserInputState
{
    public Dictionary<string, string> Inputs { get; set; } = new();
    public event Action OnStateChanged;

    public void SetInput(string pageKey, string inputName, string value)
    {
        var key = $"{pageKey}_{inputName}";
        Inputs[key] = value;
        OnStateChanged?.Invoke();
    }

    public string GetInput(string pageKey, string inputName)
    {
        var key = $"{pageKey}_{inputName}";
        Inputs.TryGetValue(key, out var value);
        return value ?? string.Empty;
    }
}

在Program.cs注册为Scoped服务：

builder.Services.AddScoped<UserInputState>();

2. Blazor页面绑定示例

@inject UserInputState InputState
@inject HttpClient Http

<input type="text" @bind="Input1Value" @bind:event="oninput" />

@code {
    private string Input1Value
    {
        get => InputState.GetInput("Page1", "Input1");
        set => InputState.SetInput("Page1", "Input1", value);
    }

    protected override async Task OnInitializedAsync()
    {
        // 加载后端存储的历史数据
        var savedData = await Http.GetFromJsonAsync<Dictionary<string, string>>("api/userinputs/Page1");
        if (savedData != null)
        {
            foreach (var (name, val) in savedData)
            {
                InputState.SetInput("Page1", name, val);
            }
        }
    }

    // 输入变化时同步到后端
    private async Task SyncData()
    {
        var pageData = InputState.Inputs
            .Where(kv => kv.Key.StartsWith("Page1_"))
            .ToDictionary(kv => kv.Key.Replace("Page1_", ""), kv => kv.Value);
        
        await Http.PostAsJsonAsync("api/userinputs/Page1", pageData);
    }
}

3. 后端API控制器

[Authorize]
[ApiController]
[Route("api/userinputs")]
public class UserInputsController : ControllerBase
{
    private readonly AppDbContext _dbContext;

    public UserInputsController(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpGet("{pageKey}")]
    public async Task<IActionResult> GetPageData(string pageKey)
    {
        var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
        var data = await _dbContext.UserInputs
            .Where(u => u.UserId == userId && u.PageKey == pageKey)
            .ToDictionaryAsync(u => u.InputName, u => u.InputValue);
        
        return Ok(data);
    }

    [HttpPost("{pageKey}")]
    public async Task<IActionResult> SavePageData(string pageKey, [FromBody] Dictionary<string, string> inputs)
    {
        var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
        foreach (var (name, val) in inputs)
        {
            var existing = await _dbContext.UserInputs
                .FirstOrDefaultAsync(u => u.UserId == userId && u.PageKey == pageKey && u.InputName == name);
            
            if (existing != null)
            {
                existing.InputValue = val;
                existing.LastUpdated = DateTime.UtcNow;
            }
            else
            {
                _dbContext.UserInputs.Add(new UserInput
                {
                    UserId = userId,
                    PageKey = pageKey,
                    InputName = name,
                    InputValue = val
                });
            }
        }
        await _dbContext.SaveChangesAsync();
        return Ok();
    }
}

内容的提问来源于stack exchange，提问作者Mrplcmodbus