How To Save Isotope Filters Across Page Reload

In this blog post I will show how to save isotope filters across page reloads. This means that when you refresh the page, the previously selected isotope filters will apply. This concept can easily be applied to any of the other grid type libraries that have filtering such as shuffle.js. We will be using LocalStorage to save the filter settings.

When applying for a job, it can be beneficial to add elements to your resume that distinguish you from other candidates. Adding a good resume headline to your resume could help you attract the hiring manager’s attention.

Basic Isotope Initiation

var $container = $('.posts'),
                 filters = {},
                 $filterContainer = $('#post-filter');
                 
$(window).on('load', function () {
    // Fire Isotope only when images are loaded
    $container.isotope({
        itemSelector: '.post',
        masonry: {},
    });

    // filter buttons
    $filterContainer.on('click', 'a', function (e) {
        e.preventDefault();
        var $this = $(this);
        
        // Make sure filter links have the data-filter attribute
        var filterValue = $( this ).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[ filterValue ] || filterValue;

        // perform filtering
        $container.isotope({filter: filterValue});

        return false;
    });
});

Function to Save to LocalStorage

function saveToLocalStorage(filter) {
    // create date object
    var object = {
        timestamp: new Date().getTime(),
    };

    // save date
    localStorage.date = JSON.stringify(object);

    // save filters
    localStorage.postFilters = filter;
}

Update Isotope Initiation Function

We need to call the saveToLocalStorage() function inside the Isotope initiation now. We do when when the filter button is clicked. So we add the line saveToLocalStorage(filterValue); to the original initiation.

$filterContainer.on('click', 'a', function (e) {
    e.preventDefault();
    var $this = $(this);
    
    // Make sure filter links have the data-filter attribute
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;

    // perform filtering
    $container.isotope({filter: filterValue});
    
    // save filters
    saveToLocalStorage(filterValue);

    return false;
});

Load Page with Filters from LocalStorage

// load filters from localstorage
if (localStorage.postFilters) {
    $container.isotope({
        filter: localStorage.postFilters,
    });
}

Clear Filters

We may want to clear filters as well after some amount of days. In the example below, we clear filters after 15 days. Add this to the top of your javascript file.

// clear filters after 15 days
(function clearLocalStorage() {
    function addDays(date, days) {
        var result = new Date(date);
        result.setDate(result.getDate() + days);
        return result;
    }

    if (localStorage.date) {
        let object = JSON.parse(localStorage.date),
            dateString = object.timestamp,
            now = new Date().getTime();

        if (now === addDays(dateString, 15).getTime())
            localStorage.removeItem('postFilters');
    }
})();