jquery how to keep settings after page reload using filtrify plugin?

Question

First of all I would like to say that I have done my homework. I understand that javascript isn't supposed to keep it's settings after page reload.

I also found 3 ways how this could be done:
1. Cookies
2. html local storage
3. Ajax

After trying to achieve this using html local storage, for several days, I've given up. I found this tutorial, which allows to cache whole html interface - see "Caching a whole interface". I made some progress using this method, but ultimately I failed.

This is my filtrify code:

<script type="text/javascript">
$(function() {
    var container = $("#itemListLeading"),
        pagination = $("#pagination");

    function setLazyLoad () {
        container.find("img").lazyload({
            event : "turnPage",
            effect : "fadeIn"
        });
    };

    function setPagination () {
        pagination.jPages({
            containerID : "itemListLeading",
            perPage : 9,
            direction : "auto",
            animation : "fadeInUp",
            previous  : "a.jprev",
            next      : "a.jnext",
            callback : function( pages, items ){
                items.showing.find("img").trigger("turnPage");
                items.oncoming.find("img").trigger("turnPage");
            }
        });
    };

    function destroyPagination () {
        pagination.jPages("destroy");
    };



    setLazyLoad();
    setPagination();

    var ft = $.filtrify("itemListLeading", "placeHolder", {
        close: true, // Close windows after tag select
        block : "data-original",
        callback: function ( query, match, mismatch ) {

            if ( mismatch.length ) $("div#reset").show(); // Show Reset
            else $("div#reset").hide();

            $('.ft-label').parent() // Hide unrelated tags
                .find('li[data-count=0]').hide().end()
                .find(':not(li[data-count=0])').show().end();

            $(".ft-selected li").css("display","inline-block"); // small tag display fix

            destroyPagination();
            setPagination();

        }
    });

    $("div#reset span").click(function() { // Make reset button clickable
        ft.reset();
    }); 
}); 
</script>

This was my shot at local storage implementation:

 $(function() {
  var edit = document.getElementById('filter-menu');
  $(edit).blur(function() {
        localStorage.setItem('todoData', this.innerHTML);
        });

  // when the page loads
  if ( localStorage.getItem('todoData') ) {
        edit.innerHTML = localStorage.getItem('todoData');
        }

  $("#reset span").click(function() { // Reset cache button
      localStorage.clear();
      location.reload();
  });   
});

Problems I experienced:
1.Cache didn't always work (I got better result using .click function)

2.When cache did work it cached state of filter settings(pressed butons), but all filter objects were displayed (instead of just those related to filter settings)

3.I couldn't reset cache (reload worked) using reset button (last paragraph of code), although when I copied localStorage.clear(); location.reload(); in firebug console cache got reset.

Answer 1

Within your filtrify callback function you need to save the query as a string to e.g. local storage

localStorage.setItem('ftquery', JSON.stringify(query))

Then after you instantiate filtrify you need to 'trigger' the query

ft.trigger(JSON.parse(localStorage.getItem('ftquery')));

So, to use your code example, edit the filtrify section like so:

var ft = $.filtrify("itemListLeading", "placeHolder", {
    close: true, // Close windows after tag select
    block : "data-original",
    callback: function ( query, match, mismatch ) {

        // save query to localStorage
        localStorage.setItem('ftquery', JSON.stringify(query));

        ...

    }
});

// retrieve query from localStorage
if (localStorage.getItem('ftquery')) {
    ft.trigger(JSON.parse(localStorage.getItem('ftquery')));
}