如何避免用户点击返回按钮时Blazor组件重新获取数据

要解决返回首页后仅显示第一页帖子的问题，核心是持久化组件的状态（已加载的帖子列表和当前页码），避免页面重新加载时组件初始化丢失数据。以下是两种可行的修改方案：

方案一：使用浏览器本地存储（LocalStorage）持久化状态 #

利用浏览器的LocalStorage保存已加载的帖子和当前页码，组件初始化时先读取存储的数据，加载更多后更新存储。

修改PostFeed组件代码： #

@inject IPostRepo _repo
@inject IJSRuntime JSRuntime

@foreach (var item in _items)
{
    <div>
        // 展示帖子内容...
    </div>
}

@if (hasMore())
{
    <Button @onclick=FetchMore>More</Button>
}

@code {
    private IEnumerable<Post> _items = new List<Post>();
    private int _page = 1;
    private const string StorageKey = "PostFeedState";

    protected override async Task OnInitializedAsync()
    {
        // 从LocalStorage读取保存的状态
        var savedState = await JSRuntime.InvokeAsync<string>("localStorage.getItem", StorageKey);
        if (!string.IsNullOrEmpty(savedState))
        {
            var state = System.Text.Json.JsonSerializer.Deserialize<PostFeedState>(savedState);
            _page = state.CurrentPage;
            _items = state.Posts;
        }
        else
        {
            // 首次加载第一页
            _items = await _repo.Fetch(page: _page, pageSize: 5);
            await SaveStateToStorage();
        }
    }

    private bool hasMore() => _page < 10;

    private async Task FetchMore()
    {
        if (hasMore())
        {
            _page += 1;
            var newItems = await _repo.Fetch(page: _page, pageSize: 5);
            _items = _items.Concat(newItems);
            
            // 更新存储状态
            await SaveStateToStorage();
            StateHasChanged();
        }
    }

    private async Task SaveStateToStorage()
    {
        var state = new PostFeedState
        {
            CurrentPage = _page,
            Posts = _items.ToList()
        };
        var json = System.Text.Json.JsonSerializer.Serialize(state);
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", StorageKey, json);
    }

    // 定义状态模型
    private class PostFeedState
    {
        public int CurrentPage { get; set; }
        public List<Post> Posts { get; set; } = new List<Post>();
    }
}

注意事项： #

• 替换async void为async Task，符合Blazor的异步规范
• 如果不需要长期保留状态，可以改用sessionStorage（关闭浏览器后清除）替代localStorage
• 若帖子数据较大，建议只保存页码，返回时重新加载到对应页码的所有数据，避免存储过多数据

方案二：通过URL查询参数跟踪页码（SEO友好） #

将当前页码同步到URL的查询参数中，返回首页时从URL读取页码，重新加载到该页码的所有帖子数据。

修改PostFeed组件代码： #

@inject IPostRepo _repo
@inject NavigationManager NavManager

@foreach (var item in _items)
{
    <div>
        // 展示帖子内容...
    </div>
}

@if (hasMore())
{
    <Button @onclick=FetchMore>More</Button>
}

@code {
    private IEnumerable<Post> _items = new List<Post>();
    private int _page = 1;
    private const int PageSize = 5;

    protected override async Task OnInitializedAsync()
    {
        // 从URL查询参数读取页码
        var uri = new Uri(NavManager.Uri);
        var pageParam = System.Web.HttpUtility.ParseQueryString(uri.Query).Get("page");
        if (int.TryParse(pageParam, out var savedPage) && savedPage >=1)
        {
            _page = savedPage;
            // 加载从第1页到当前页的所有数据
            _items = new List<Post>();
            for(int i=1; i<=_page; i++)
            {
                var pageItems = await _repo.Fetch(page: i, pageSize: PageSize);
                _items = _items.Concat(pageItems);
            }
        }
        else
        {
            _items = await _repo.Fetch(page: _page, pageSize: PageSize);
            UpdateUrlWithPage();
        }
    }

    private bool hasMore() => _page < 10;

    private async Task FetchMore()
    {
        if (hasMore())
        {
            _page += 1;
            var newItems = await _repo.Fetch(page: _page, pageSize: PageSize);
            _items = _items.Concat(newItems);
            
            // 更新URL查询参数
            UpdateUrlWithPage();
            StateHasChanged();
        }
    }

    private void UpdateUrlWithPage()
    {
        var uri = new Uri(NavManager.Uri);
        var queryParams = System.Web.HttpUtility.ParseQueryString(uri.Query);
        queryParams.Set("page", _page.ToString());
        var newUri = new UriBuilder(uri) { Query = queryParams.ToString() }.Uri;
        NavManager.NavigateTo(newUri.ToString(), forceLoad: false);
    }
}

注意事项： #

• 该方案URL会显示?page=2这类参数，用户可以直接分享链接到指定页码
• 如果不想修改URL路径，可以结合History.pushState（通过IJSRuntime调用）来更新历史记录而不改变URL显示

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