如何保存过滤器数据并在刷新页面时不丢失

Question

我想知道是否可以保存我创建的过滤器，并且当我刷新我的页面时，我的过滤器将保持保存状态

这是我的过滤函数，它工作正常。但是我正在寻找的是，当我刷新网站并重新打开模式时，我的过滤器将保持不变

function filter() {
        $.ajax({
            type: 'post',
            url: 'example.php',
            data: { 
                'oper'  : 'filters',
                'id' : $("#id").val(),
                'filter1' : $("#filter1").val(),
                'filter2' : $("#filter2").val(),
                'filter3' : $("#filter3").val(),
                'filter4' : $("#filter4").val(),
                'filter5' : $("#filter5").val(),
                'filter6' : $("#filter6").val(),
            },
            success: function (response) {
                $('#modal-1').fadeOut(500);
                $('#modal-1').html(response);
                $('#modal-1').fadeIn(500);
            },
            error: function () {
                swal({title: "Error",text: "Oops Error", type: "error"});
            }
        });
    }

在这里我给出了我的代码的更多细节

$id = (!empty($_REQUEST['id']) ? $_REQUEST['id'] : '');
    $filter1    = (!empty($_REQUEST['filter1']) ? $_REQUEST['filter1] : '');
    $filter2    = (!empty($_REQUEST['filter2']) ? $_REQUEST['filter2] : '');
    $filter3    = (!empty($_REQUEST['filter3']) ? $_REQUEST['filter3] : '');
    $filter4    = (!empty($_REQUEST['filter4']) ? $_REQUEST['filter4] : '');
    $filter5    = (!empty($_REQUEST['filter5']) ? $_REQUEST['filter5] : '');
    $filter6    = (!empty($_REQUEST['filter6']) ? $_REQUEST['filter6] : '');
    $filter7    = (!empty($_REQUEST['filter7']) ? $_REQUEST['filter7] : '');

    $where = '';
    if($id != ''){
        $where .= " AND a.id = $id ";
    }
    if($filter1 != ''){
        $where .= " AND a.filter1 >= '$filter1' ";
    }
    if($filter2 != ''){
        $where .= " AND a.filter2 <= '$filter2' ";
    }
    if($filter3 != ''){
        $where .= " AND a.filter3 = '$filter3' ";
    }
    if($filter4 != ''){
        $where .= " AND a.filter4 = $filter4 ";
    }
    if($filter5 != ''){
        $where .= " AND a.filter5 = $filter5 ";
    }
    if($filter6 != ''){
        $filter6 = json_encode($filter6);
        $filter6 = '';
        $i = 0;
        foreach($filter6 as $user){
            if($i > 0)
                $filter6 .=",";
            $filter6 .= "'$user'";
            $i++;
        }
        if($filter6 != "''"){
            $where .= " AND a.filter6 IN ($filter6)";   
        }
    }
    if($filter7 != ''){
        $filter7 = json_encode($filter7);
        $filter7 = '';
        $i = 0;
        foreach($filter7 as $equip){
            if($i > 0)
                $filter7 .=",";
            $filter7 .= "'$equip'";
            $i++;
        }
        if($filter7 != "''"){
            $where .= " AND a.filter7 IN ($filter7)";   
        }
    }

这是我的php模式

<div id="menu-5" data-menu-size="440" class="menu-wrapper menu-light menu-top menu-large">
    <div class="menu-scroll">
        <div class="menu">
            <em class="menu-divider">Filter<i class="fa fa-navicon"></i></em>
            <div class="content" style="padding-left: 20px!important;padding-right: 20px!important;">
                <div class="input-simple-1 has-icon input-green full-bottom"><em>id:</em><i class="fa fa-list_ol"></i><input type="number" id="id" name="id" value=''></div>
                <div class="input-simple-1 has-icon input-green full-bottom"><em>Filter1:</em><i class="fa fa-calendar"></i><input type="date" id="Filter1" name="Filter1" value=''></div>
                <div class="input-simple-1 has-icon input-green full-bottom"><em>Filter2:</em><i class="fa fa-calendar"></i><input type="date" id="Filter2" name="Filter2" value=''></div>

                <div class="select-box select-box-1">
                    <em>Filter3:</em>
                    <?php filter3(); ?>
                </div>
                <div class="select-box select-box-1" >
                    <em>Filter4:</em>
                    <?php filter4(); ?>
                </div>
                <div class="col-xs-12">
                    <div class="form-group label-floating select2">
                        <label class="control-label">Filter5</label>
                        <?php Filter5(); ?>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="form-group label-floating select2">
                        <label class="control-label">Filter6</label>
                        <?php Filter6(); ?>
                    </div>
                </div>

                <div class="clear"></div>
            </div>

            <div class="content demo-buttons">
                <a href="javascript:filter();" class="button-full btn bg-green2-light close-menu" style="    margin: 3px 0;">Filter</a>
                <a href="example.php" class="button-full btn bg-blue-light close-menu" style="    margin: 3px 0;">Clear Filter</a>
                <a href="#" class="button-full btn bg-red-light close-menu" style="    margin: 3px 0;">close</a>
            </div>
        </div>
    </div>
</div>

Answer 1

只需使用javascript将过滤器保存在localStorage中，也许是在ajax成功回调中。刷新页面后，检查筛选器的localStorage。如果存在，使用ajax将过滤器加载到DOM。

Answer 2

对于存储到客户端的数据，有很多选择，但是你需要根据你的需求来选择，比如任何存储限制，哪种数据值类型，你需要Indexable吗？等。

1. Cookie
2. Local Storage
3. IndexDB