记住页面重新加载后的复选框和单选按钮状态

Question

我正在使用 jQuery 和 Laravel (PHP) 制作过滤器。当我单击复选框或单选按钮时，它会过滤数据，但是，如果我单击复选框或单选按钮并刷新页面，选中复选框或单选按钮的状态将不再保留。我希望即使在页面重新加载后仍保持选中状态。

这是我的代码。

<div class="search">

    <input type="radio" name="expertise[]" value="backend" />programmer
    <input type="radio" name="expertise[]" value="frontend" />programmer

</div>
<div class="avail">
    <p>
        <input type="checkbox" name="available[]" value="20" />20
    </p>
    <p>
        <input type="checkbox"  name="available[]" value="30" />30
    </p>
</div>

jQuery

<script>
    var expertise = [];
    var  available = [];

    $(document).on('change', 'input[name="expertise[]"], input[name="available[]"]', function(e) {
        e.preventDefault();

        types = []; 
        available = [];
     

        if (document.location.href.indexOf('filter') > -1) {
            var url = '../developers/filter?type=dev';
        } else {
            var url = '/developers/filter?type=dev';
        }

        $('input[name="type[]"]:checked').each(function() {
            expertise.push($(this).val());
            url = url + '&expertise=' + $(this).val();
        });
        $('input[name="available[]"]:checked').each(function() {
            available.push($(this).val());
            url = url + '&available=' + $(this).val();
        });
     

        if (document.location.href.indexOf('filter') > -1) {
            $.get('../developers/filter', {
                type: 'dev',
                expertise: expertise,
                available: available,
               
            }, function(markup) {
                $('.dev-holder').html(markup);
            });
        } else {
            $.get('developers/filter', {
                type: 'dev',
                expertise: expertise,
                available: available,
               
            }, function(markup) {
                $('.dev-holder').html(markup);
            });
        }
        window.history.pushState("", "", url);
    });

</script>

Laravel 控制器

public function search(Request $request)
{

    $type = $request->get('expertise'); 
    $availability = $request->get('available');
  
  
  $url = 'filter';

    $users = User::where('type','dev')->where('is_approved', '=', 1);
    if (!empty($type)) {
            $users = $users->where('expertise','dev');
    }
        $users->when($availability, function ($query, $availability ) {
            return $query->where(function ($whereQuery) use ($availability ) {
                foreach ($availability as $item) {
                    $whereQuery->orWhere('avaibility', 'LIKE', $item); 
                }
            });
        });
     

Answer 1

JS/jQuery：保存到本地存储
PHP/Laravel：保存在会话中，

session_start();
if (!isset($_SESSION['vals']) {
    $_SESSION['vals'] = 'default=stuff'
}

$_SESSION['vals'] //access it like this

然后您可以在他们提交时更改它 ,

//set
let values = ["yes"]
localStorage.setItem('vals',JSON.stringify(values))

//retrieve
let result = localStorage.getItem('vals')
result = JSON.parse(result)

//use
if (result[0] = "yes") {
    yourradiothing.checked = true
}

您还可以存储其他东西。

Answer 2

U 可以使用本地存储来保存状态。假设如果单击复选框，则将其存储在本地存储中，如果页面重新加载，则可以从本地存储中提取数据并应用它。

Answer 3

您已经将内容推送到 URL，因此当您加载页面时，您可以检查 url 查询字符串是否已设置。

$(function () {
    var urlSearchParams = new URLSearchParams(window.location.search); 
    if (urlSearchParams.get('expertise[]')) {
        $('input[name="expertise[]"][value="'+urlSearchParams.get('expertise[]')+'"]').prop('checked', true);
    }
    urlSearchParams.getAll('available[]').forEach(function (val) {
       $('input[name="available[]"][value="'+val+'"]').prop('checked', true);
    });
});

注意URLSearchParams需要在IE中填充

这也可以通过 HTML 和 Laravel 来实现：

<div class="expertise">

    <input type="radio" name="expertise[]" id="backend" value="backend" 
{{in_array('backend', request()->input('expertise',[])) ? 'checked' : ''}} />Backend
    <input type="radio" name="expertise[]" id="frontend" value="frontend" 
 {{in_array('frontend', request()->input('expertise',[])) ? 'checked' : ''}}/>Frontend

</div>
<div class="availability">
    <p>
        <input type="checkbox" name="available[]" value="above30"
        {{in_array('above30', request()->input('available',[])) ? 'checked' : ''}}
        />Above 30 hrs/week
    </p>
    <p>
        <input type="checkbox"  name="available[]" value="below30"
        {{in_array('below30', request()->input('available',[])) ? 'checked' : ''}}
        />Below 30 hrs/week
    </p>
</div>

假设您在 .blade.php 文件中有此 HTML