如何在Blazor WebAssembly中创建可添加值的localStorage列表字符串

需求 #

在Blazor WebAssembly应用的index.razor页面中，完成两个核心功能：

• 向localStorage中存储的ID列表添加新ID
• 检查当前输入的ID是否已存在于该列表中

现有代码 #

<EditForm Model="@data" OnSubmit="HandleLogin" class="login-form">
   
    
     <input type="text" class="form-control" @bind=@data.Id @bind:event="oninput" placeholder="Enter ID" name="psw" id="psw" required>
   
    
            <button type="submit" class="loginlink" >Log in</button>
          
    
 </EditForm>


 private DataModel data = new DataModel();

 protected override Task OnInitializedAsync()
 {
     data = new DataModel();
     return base.OnInitializedAsync();
 }

 List<string> idslist = new List<string>();

 private async void HandleLogin()
 {

     var currentId = await LocalStorage.GetItemAsync<string>("id");
     var curentsmscode = await LocalStorage.GetItemAsync<string>("smscode");
     var curenttoken = await LocalStorage.GetItemAsync<string>("Token");
     var idslistcurr = await LocalStorage.GetItemAsync<string>("studentsInfo");


     if (currentId == data.Id && data.Id.Length >= 4 && curentsmscode!=null && curenttoken!=null)
     {

         Console.WriteLine("Already logged in!");

         await Task.Delay(1500);


         Console.Write(string.Join(System.Environment.NewLine, ids));

         NavManager.NavigateTo("/enviar");

     }
     else 
     {


         if (data.Id != null && data.Id.Length >= 4)
         {

             string usersid = data.Id;
             ids.Add(usersid);
             var randomId = Guid.NewGuid().ToString();

             idslist.Add(data.Id);

             await LocalStorage.SetItemAsync("studentsInfo",(idslist));

             Console.WriteLine("New User Welcome!");

            
             await LocalStorage.SetItemAsync<string>("id", data.Id);
             await LocalStorage.SetItemAsync<string>("userId", randomId);
             await AuthStateProvider.GetAuthenticationStateAsync();

             NavManager.NavigateTo("/verificar");

         }
         else if(curentsmscode==null)
         {

             var usersid = data.Id;
             var user = users.Where(x => x.Id == usersid).First();


             await LocalStorage.SetItemAsync<string>("id", data.Id);
             await LocalStorage.SetItemAsync<string>("userId", user.UserId);
             await AuthStateProvider.GetAuthenticationStateAsync();

             Console.WriteLine("Logged In!");

             NavManager.NavigateTo("/verificar");

         }
         else if (data.Id == null || data.Id.Length < 4)
         {
             errorMessage2 = true;
         }


         Console.Write(string.Join(System.Environment.NewLine, ids));
         Console.Write(string.Join(System.Environment.NewLine, idscur));
     }


 }

代码问题 #

1. 存储格式错误：localStorage仅支持字符串存储，直接存入List<string>会导致序列化异常，无法正确读取数据。
2. 缺少存在性检查逻辑：未从localStorage加载已存ID列表，也没有判断当前输入ID是否已存在的代码。
3. 初始化未同步数据：页面加载时idslist为空列表，没有从localStorage读取已保存的ID数据。
4. 异步方法误用：使用async void处理表单提交，不符合Blazor异步最佳实践，可能导致异常无法捕获。

修正后的代码 #

<EditForm Model="@data" OnSubmit="HandleLogin" class="login-form">
    <input type="text" class="form-control" 
           @bind=@data.Id @bind:event="oninput" 
           placeholder="输入ID" name="psw" id="psw" required>
    <button type="submit" class="loginlink">登录</button>
</EditForm>

@if (errorMessage2)
{
    <div class="error">ID长度不能少于4位</div>
}

@code {
    private DataModel data = new DataModel();
    private List<string> idslist = new();
    private bool errorMessage2;

    [Inject]
    protected ILocalStorageService LocalStorage { get; set; }
    [Inject]
    protected NavigationManager NavManager { get; set; }
    [Inject]
    protected AuthenticationStateProvider AuthStateProvider { get; set; }

    // 假设users为现有用户数据源
    private List<UserModel> users = new();

    protected override async Task OnInitializedAsync()
    {
        data = new DataModel();
        // 从localStorage加载已保存的ID列表
        var storedIds = await LocalStorage.GetItemAsync<string>("studentsInfo");
        if (!string.IsNullOrEmpty(storedIds))
        {
            idslist = JsonSerializer.Deserialize<List<string>>(storedIds);
        }
        await base.OnInitializedAsync();
    }

    private async Task HandleLogin()
    {
        errorMessage2 = false;
        var currentId = await LocalStorage.GetItemAsync<string>("id");
        var curentsmscode = await LocalStorage.GetItemAsync<string>("smscode");
        var curenttoken = await LocalStorage.GetItemAsync<string>("Token");

        // 检查当前输入ID是否已存在
        bool isIdExists = idslist.Contains(data.Id);

        if (currentId == data.Id && data.Id.Length >= 4 && curentsmscode != null && curenttoken != null)
        {
            Console.WriteLine("已登录！");
            await Task.Delay(1500);
            NavManager.NavigateTo("/enviar");
        }
        else
        {
            if (!string.IsNullOrEmpty(data.Id) && data.Id.Length >= 4)
            {
                if (isIdExists)
                {
                    Console.WriteLine("该ID已存在！");
                    // 可添加前端提示逻辑
                }
                else
                {
                    // 添加新ID到列表
                    idslist.Add(data.Id);
                    // 将列表序列化为JSON字符串存入localStorage
                    await LocalStorage.SetItemAsync("studentsInfo", JsonSerializer.Serialize(idslist));

                    Console.WriteLine("欢迎新用户！");
                    var randomId = Guid.NewGuid().ToString();
                    await LocalStorage.SetItemAsync<string>("id", data.Id);
                    await LocalStorage.SetItemAsync<string>("userId", randomId);
                    await AuthStateProvider.GetAuthenticationStateAsync();
                    NavManager.NavigateTo("/verificar");
                }
            }
            else if (curentsmscode == null)
            {
                var user = users.FirstOrDefault(x => x.Id == data.Id);
                if (user != null)
                {
                    await LocalStorage.SetItemAsync<string>("id", data.Id);
                    await LocalStorage.SetItemAsync<string>("userId", user.UserId);
                    await AuthStateProvider.GetAuthenticationStateAsync();
                    Console.WriteLine("登录成功！");
                    NavManager.NavigateTo("/verificar");
                }
                else
                {
                    Console.WriteLine("用户不存在！");
                    // 可添加前端提示逻辑
                }
            }
            else if (string.IsNullOrEmpty(data.Id) || data.Id.Length < 4)
            {
                errorMessage2 = true;
            }

            Console.WriteLine(string.Join(Environment.NewLine, idslist));
        }
    }

    // 定义所需模型类
    public class DataModel
    {
        public string Id { get; set; }
    }

    public class UserModel
    {
        public string Id { get; set; }
        public string UserId { get; set; }
    }
}

核心修正说明 #

• 序列化处理：使用JsonSerializer将ID列表序列化为JSON字符串存入localStorage，读取时反序列化还原列表，适配localStorage的字符串存储限制。
• 存在性检查：通过idslist.Contains(data.Id)直接判断当前输入ID是否已存在于列表中。
• 初始化数据同步：在页面初始化时从localStorage加载已保存的ID列表，确保数据状态一致。
• 异步方法规范：将async void改为async Task，符合Blazor异步处理的最佳实践，避免异常丢失。
• 空值安全优化：使用FirstOrDefault替代First，避免找不到用户时抛出异常。

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