Asp.net 页面刷新后如何存储JS Select 数据

我正在try 创建一个Electron 商务页面.我想使用复选框进行类别 Select .它可以进行过滤，并为我提供必要的数据；后端工作.但当我更改页面(分页功能)时，类别 Select 就丢失了.因此，数据不再稳定.该列表再次为我提供了默认的SQL查询.我怎么才能让它稳定下来呢？如何存储我的 Select ？

EDIT (problem occures to this if I use localStorage, based on the answer)个 如果我需要举个例子让你更好地理解.您的数据中有10个项目，每个项目显示6个项目，当您切换到第二页时，您需要查看其余的4个数据.我的问题出现在这里，我看不到剩下的4个数据.我在每个版本中又看到了前6个.我看到剩下的4个数据(一秒钟)，然后我立即看到前6个数据.

If more code blocks are needed I can edit the post个

Controller个

[Authorize]
public async Task<IActionResult> Index(GetECommerceIndexQuery request, List<int> categoryIds)
{
    var result = await MediatrSend(request);
    return View(result);
}

[Authorize]
[HttpPost]
public async Task<IActionResult> GetCategories([FromBody] List<int> selectedIds)
{
    var result = await MediatrSend(new GetECommerceIndexQuery { CategoryIds = selectedIds});
    return Json(result);
}

Query File个

 public class GetECommerceIndexQuery : MediatR.IRequest<ECommerceListDTO>
    {
        public ClaimModel ClaimModel { get; set; }
        public List<int> CategoryIds { get; set; }
        public int Page { get; set; } = 1;
        public int PageSize { get; set; } = 6;
    }

    public class GetECommerceIndexQueryHandler : IRequestHandler<GetECommerceIndexQuery, ECommerceListDTO>
    {
        private readonly IECommerceProductRepository _eCommerceProductRepository;

        public GetECommerceIndexQueryHandler(IECommerceProductRepository eCommerceProductRepository)
        {
            _eCommerceProductRepository = eCommerceProductRepository;
        }
        public async Task<ECommerceListDTO> Handle(GetECommerceIndexQuery request, CancellationToken cancellationToken)
        {
            ECommerceListDTO response = new ECommerceListDTO();

            int page = request.Page;
            int pageSize = request.PageSize;

            var products = await _eCommerceProductRepository.GetECommerceProductList(request.CategoryIds);

            var totalProducts = products.Count();
            var totalPages = (int)Math.Ceiling((double)totalProducts / pageSize);
            var paginatedProducts = products.Skip((page - 1) * pageSize).Take(pageSize);

            response.MetaData = new DatatableMetaDTO
            {
                page = page,
                pages = totalPages,
                perpage = pageSize,
                total = totalProducts,
            };

            response.ProductData = paginatedProducts;
            response.CategoryData = await _eCommerceProductRepository.GetECommerceCategoryList();

            return response;
        }
    }

Pagination个

 <!-- Pagination Buttons -->
                            <div class="d-flex justify-content-center">
                                <ul class="pagination">
                                    @for (int i = 1; i <= Model.MetaData.pages; i++)
                                    {
                                        <li class="page-item @(i == Model.MetaData.page ? "active" : "")">
                                            <a class="page-link" href="@Url.Action("Index", new { page = i })">@i</a>
                                        </li>
                                    }
                                </ul>
                            </div>

Script个

@section scripts {
    <script>
        $(document).ready(function () {
            $(".checkbox-item").click(function () {
                var selectedValues = $(".checkbox-item:checked").map(function () {
                    return parseInt(this.value, 10);
                }).get();

                var jsonData = JSON.stringify(selectedValues);

                $.ajax({
                    url: '@Url.Action("GetCategories", "ECommerce")',
                    type: 'POST',
                    data: jsonData,
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        console.log(data);
                        renderProducts(data.ProductData);
                    },
                    error: function (error) {
                        console.error('Error Occurred:', error);
                    }
                });
            });

            function renderProducts(products) {
                $('#productContainer').empty();

                $.each(products, function (index, product) {
                    var productUrl = '@Url.Action("ProductDetail", new { id = 0 })'.replace("0", product.Id);

                    var productHtml = `
                                <div class="col-md-4 col-lg-12 col-xxl-4">
                                    <a href="${productUrl}" class="product-link">
                                        <div class="card card-custom gutter-b card-stretch">
                                            <div class="card-body d-flex flex-column rounded bg-light justify-content-between">
                                                <div class="text-center rounded mb-7">
                                                    <img src="assets/media/products/${product.ProductName}" class="mw-100 w-200px" alt="${product.ProductName}">
                                                </div>
                                                <div>
                                                    <h4 class="font-size-h5">
                                                        <span class="text-dark-75 font-weight-bolder">${product.ProductName}</span>
                                                    </h4>
                                                    <div class="font-size-h6 text-muted font-weight-bolder">${product.Price}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>`;

                    $('#productContainer').append(productHtml);
                });
            }
        });
    </script>
}