Изотопная сетка: запомнить выбор фильтра после обновления

Question

У меня есть рабочий множественный флажок и фильтр ползунка с изотопом (v3). Действительно хорошо работает.

Моя проблема заключается в том, что когда я обновляю страницу, выбранные флажки все еще отмечены, но в сетке отображаются все элементы. Должны отображаться только выбранные флажки фильтра.

Почему-то мне нужно хранить их в LocalStorage или по хеш-URL. Будем благодарны за любую помощь.

У меня есть сценарий здесь;

var $container = $('.items'),

prijsSlider = document.getElementById('prijs-slider'),
$prijsFrom = $('.prijs-from'),
$prijsTo = $('.prijs-to'),

tellerSlider = document.getElementById('teller-slider'),
$tellerFrom = $('.teller-from'),
$tellerTo = $('.teller-to'),

bouwjaarSlider = document.getElementById('bouwjaar-slider'),
$bouwjaarFrom = $('.bouwjaar-from'),
$bouwjaarTo = $('.bouwjaar-to'),

financieringSlider = document.getElementById('financiering-slider'),
$financieringFrom = $('.financiering-from'),
$financieringTo = $('.financiering-to'),

filters = {},
comboFilter;

    noUiSlider.create(prijsSlider, {
        start: [10000, 200000],
        connect: true,
        step: 500,
        range: {
            'min': 10000,
            'max': 200000
        }
    });

    noUiSlider.create(tellerSlider, {
        start: [0, 200000],
        connect: true,
        step: 500,
        range: {
            'min': 0,
            'max': 200000
        }
    });

    noUiSlider.create(bouwjaarSlider, {
        start: [2008, 2018],
        connect: true,
        step: 1,
        range: {
            'min': 2008,
            'max': 2018
        }
    });

    noUiSlider.create(financieringSlider, {
        start: [0, 3000],
        connect: true,
        step: 1,
        range: {
            'min': 0,
            'max': 3000
        }
    });

    prijsSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $prijsTo : $prijsFrom).text(parseInt(values[handle]));
        $container.isotope({
            filter: multipleFilter
        });
    });

    tellerSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $tellerTo : $tellerFrom).text(parseInt(values[handle]));
        $container.isotope({
            filter: multipleFilter
        });
    });

    bouwjaarSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $bouwjaarTo : $bouwjaarFrom).text(parseInt(values[handle]));
        $container.isotope({
            filter: multipleFilter
        });
    });

    financieringSlider.noUiSlider.on('update', function (values, handle) {
        (handle ? $financieringTo : $financieringFrom).text(parseInt(values[handle]));
        $container.isotope({
            filter: multipleFilter
        });
    });

    // do stuff when checkbox change
    $('#options').on('change', function (jQEvent) {
        var $checkbox = $(jQEvent.target);
        manageCheckbox($checkbox);
        comboFilter = getComboFilter(filters);
        $container.isotope({
            filter: multipleFilter
        });
    });

    function multipleFilter() {
        var that = this;

        function checkPrijs() {
            var prijs = $(that).find('.prijs').text();
            prijsFrom = parseInt($prijsFrom.text()) || 0;
            prijsTo = parseInt($prijsTo.text()) || 0;

            prijs = parseInt(prijs) || 0;

            return prijs >= prijsFrom && prijs <= prijsTo;
        }

        function checkTeller() {
            var teller = $(that).find('.teller').text();
            tellerFrom = parseInt($tellerFrom.text()) || 0;
            tellerTo = parseInt($tellerTo.text()) || 0;

            teller = parseInt(teller) || 0;

            return teller >= tellerFrom && teller <= tellerTo;
        }

        function checkBouwjaar() {
            var bouwjaar = $(that).find('.bouwjaar').text();
            bouwjaarFrom = parseInt($bouwjaarFrom.text()) || 0;
            bouwjaarTo = parseInt($bouwjaarTo.text()) || 0;

            bouwjaar = parseInt(bouwjaar) || 0;

            return bouwjaar >= bouwjaarFrom && bouwjaar <= bouwjaarTo;
        }

        function checkFinanciering() {
            var financiering = $(that).find('.financiering').text();
            financieringFrom = parseInt($financieringFrom.text()) || 0;
            financieringTo = parseInt($financieringTo.text()) || 0;

            financiering = parseInt(financiering) || 0;

            return financiering >= financieringFrom && financiering <= financieringTo;
        }

        return checkPrijs() && checkTeller() && checkBouwjaar() && checkFinanciering() && $(this).is(comboFilter || '*');
    }

    function getComboFilter(filters) {
        var i = 0;
        var comboFilters = [];
        var message = [];
        for (var prop in filters) {
            message.push(filters[prop].join(' '));
            var filterGroup = filters[prop];
            // skip to next filter group if it doesn't have any values
            if (!filterGroup.length) {
                continue;
            }
            if (i === 0) {
                // copy to new array
                comboFilters = filterGroup.slice(0);
            } else {
                var filterSelectors = [];
                // copy to fresh array
                var groupCombo = comboFilters.slice(0); // [ A, B ]
                // merge filter Groups
                for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
                    for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
                        filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
                    }
                }
                // apply filter selectors to combo filters for next group
                comboFilters = filterSelectors;
            }
            i++;
        }
        var comboFilter = comboFilters.join(', ');
        return comboFilter;
    }

    function manageCheckbox($checkbox) {
        var checkbox = $checkbox[0];
        var group = $checkbox.parents('.option-set').attr('data-group');
        // create array for filter group, if not there yet
        var filterGroup = filters[group];
        if (!filterGroup) {
            filterGroup = filters[group] = [];
        }
        var isAll = $checkbox.hasClass('all');
        // reset filter group if the all box was checked
        if (isAll) {
            delete filters[group];
            if (!checkbox.checked) {
                checkbox.checked = 'checked';
            }
        }
        // index of
        var index = $.inArray(checkbox.value, filterGroup);
        if (checkbox.checked) {
            var selector = isAll ? 'input' : 'input.all';
            $checkbox.siblings(selector).removeAttr('checked');
            if (!isAll && index === -1) {
                // add filter to group
                filters[group].push(checkbox.value);
            }
        } else if (!isAll) {
            // remove filter from group
            filters[group].splice(index, 1);
            // if unchecked the last box, check the all
            if (!$checkbox.siblings('[checked]').length) {
                $checkbox.siblings('input.all').attr('checked', 'checked');
            }
        }
    }