如何保存過濾器數據並且在刷新頁面時不會丟失

Question

我想知道是否可以保存我制作的過濾器，並且當我刷新頁面時，我的過濾器會一直保存

這是我的過濾器 function 它工作正常。 但我正在尋找的是，當我刷新網站並重新打開模式時，我的過濾器將保留

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. 曲奇餅
2. 本地存儲
3. 索引數據庫