如何用localStorage保存下拉框选中值，同时实现GET方式AJAX+PHP筛选分页

实现思路 #

优先从URL GET参数读取选中值（兼容GET提交、页面刷新、链接分享场景），本地localStorage作为降级存储，后端渲染时直接给option加selected属性兜底，三层逻辑保证选中值不丢失。

代码修改 #

1. 前端页面初始化时恢复选中值，在$(document).ready内新增如下逻辑：

// 恢复下拉框选中值
function initFilterSelect() {
    // 优先读URL参数，兼容GET跳转/刷新场景
    const urlParams = new URLSearchParams(window.location.search);
    const sortby = urlParams.get('sortby') || localStorage.getItem('sortby');
    const emailCheck = urlParams.get('emailCheck') || localStorage.getItem('emailCheck');
    const downloadCheck = urlParams.get('downloadCheck') || localStorage.getItem('downloadCheck');
    
    sortby && $('select[name="sortby"]').val(sortby);
    emailCheck && $('select[name="emailCheck"]').val(emailCheck);
    downloadCheck && $('select[name="downloadCheck"]').val(downloadCheck);
}
initFilterSelect();

2. 下拉框变更时存储选中值，修改原有change事件逻辑：

$('.filter_all').on('change', function() {
    // 存储到localStorage做降级备份
    localStorage.setItem('sortby', $('select[name="sortby"]').val());
    localStorage.setItem('emailCheck', $('select[name="emailCheck"]').val());
    localStorage.setItem('downloadCheck', $('select[name="downloadCheck"]').val());
    filter_data();
});

你原有代码中的get_filter函数是为多筛选值场景设计的，当前每个筛选类别只有1个下拉框，直接按name属性取值更简洁，不需要遍历数组存储。

3. 后端渲染下拉框时主动加选中状态（可选但更稳妥），PHP渲染HTML时修改option逻辑：

<select name="sortby" class="filter_all orderby">
    <option value="date_down" <?php echo ($_GET['sortby'] ?? 'date_down') == 'date_down' ? 'selected' : '' ?>>Datum: (aflopend)</option>
    <option value="date_up" <?php echo ($_GET['sortby'] ?? '') == 'date_up' ? 'selected' : '' ?>>Datum: (oplopend)</option>
    <option value="name_up" <?php echo ($_GET['sortby'] ?? '') == 'name_up' ? 'selected' : '' ?>>Naam (aflopend)</option>
    <option value="name_down" <?php echo ($_GET['sortby'] ?? '') == 'name_down' ? 'selected' : '' ?>>Naam (oplopend)</option>
</select>
<!-- 另外两个下拉框按同样逻辑添加selected判断即可 -->

实现思路 #

前端AJAX改用GET方式传参，同时同步参数到URL地址栏（不刷新页面），后端从$_GET读取参数处理筛选和分页逻辑，生成分页链接时携带所有筛选参数。

代码修改 #

1. 前端AJAX逻辑修改，调整filter_data函数：

function filter_data() {
    var action = 'fetch_data';
    var orderby = $('select[name="sortby"]').val();
    var mailCheck = $('select[name="emailCheck"]').val();
    var downloadCheck = $('select[name="downloadCheck"]').val();
    var current_page = "<?php echo $page; ?>";
    var limit = "<?php echo $limit; ?>";

    // 同步筛选参数到URL地址栏，不刷新页面
    const newUrl = new URL(window.location);
    newUrl.searchParams.set('sortby', orderby);
    newUrl.searchParams.set('emailCheck', mailCheck);
    newUrl.searchParams.set('downloadCheck', downloadCheck);
    newUrl.searchParams.set('page', current_page);
    window.history.pushState({}, '', newUrl);

    $.ajax({
        url: "filter-script.php",
        method: "GET", // 改为GET请求
        data: {
            action: action,
            orderby: orderby,
            mailCheck: mailCheck,
            downloadCheck: downloadCheck,
            limit: limit,
            current_page: current_page
        },
        success: function(data) {
            $('#customers').html(data);
        }
    });
}

2. 后端filter-script.php参数读取逻辑修改，把原有$_POST替换为$_GET，增加默认值避免报错：

$orderby = $_GET['orderby'] ?? 'date_down';
$mailCheck = $_GET['mailCheck'] ?? '';
$downloadCheck = $_GET['downloadCheck'] ?? '';
$current_page = $_GET['current_page'] ?? 1;
$limit = $_GET['limit'] ?? 10;

// 后续数据查询、分页计算逻辑保持不变，按拿到的参数筛选返回即可

3. 分页链接生成逻辑修改，生成分页页码时携带所有筛选参数：

// 生成分页链接示例，遍历所有页码时调用
$pageLink = '?' . http_build_query([
    'sortby' => $orderby,
    'emailCheck' => $mailCheck,
    'downloadCheck' => $downloadCheck,
    'page' => $pageNum // 遍历的页码变量
]);
echo "<a href='{$pageLink}' class='page-item'>{$pageNum}</a>";

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