Question

我试图在用户遍历我的rails网站上的另一个页面后保持复选框状态。

目前，当我从索引页面导航到另一个页面并返回索引页面复选框时，请检查索引页面。我希望它能保持我给出的值，即使我导航到另一个页面。

我写过

$(document).ready(function() {

    //Fixing the Turbolinks issue in rails with 'ready page:load'
    $(document).on('ready page:load', function() {
function addingChecks() {
    var filterStatusArr = [];
    filterStatusArr = localStorage.filterStatus;
    $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function() {
        for (var i = 0; i < filterStatusArr.length; ++i) {
            if (filterStatusArr[i] == "true") {
                $(this).prop('checked', true);
            } else {
                $(this).prop('checked', false);
            }
        }
    });
};

rememberFilterState();
addingChecks();
function rememberFilterState() {

    filterStatus = [];
    $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function() {
        if ($(this).is(':checked')) {
            filterStatus.push("true");
        } else {
            filterStatus.push("false");
        }
        localStorage.input = filterStatus;
    });
    //alert(filterStatus);
}

运行良好onload但是当我转到另一个页面然后回来时，这会忽略。

这是批准的行为吗？我该如何解决这个问题？

干杯

Answer 1

您将值存储在 rememberFilterState 中的localStorage.input，但是从 addsChecks 中的localStorage.filterStatus取回，

请注意，localStorage以json格式存储，设置时必须使用JSON.stringify，获取值时需要JSON.parse

查看下面更优化的代码段

function addingChecks() {
    if(!localStorage.filterStatus) {
        return;
    } else {
        var filterStatusArr = JSON.parse(localStorage.filterStatus);
        $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function(index){
            $(this).val(filterStatusArr[index]);
        });
    }
};

function rememberFilterState() {
    var filterStatus = [];
    $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function() {
        filterStatus.push($(this).val());
    });
    localStorage.filterStatus = JSON.stringify(filterStatus);
}

$(document).ready(addingChecks);
$(window).unload(rememberFilterState);

导航到另一个页面后，复选框状态发生变化

1 个答案: