html local storage, caching interface and reseting it, having some problems

[wonderland]

I'm using filtrify plugin on my website and I needed a way to save filter settings when user reloads page or pareses browsers back for forward buttons. After searching for a while I found html local storage solution.

I have somewhat implemented in in my website, but I can't get it exactly right.

This is the code I'm using:

    $(function() {
      var edit = document.getElementById('itemfilter');
      $(edit).click(function() {
            localStorage.setItem('todoData', this.innerHTML);
            });

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

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

My biggest problems are:

1. It caches contents of #itemfilter, but I would like for it to cache ul.ft-field.

2. Caching begins only when I click on #itemfilter, but I would prefer using ul.ft-field li instead.

I've tried replacing var edit = document.getElementById('itemfilter');

with var edit = $('.ft-field'); and other jquery selectors, but that didn't work.

P.S Is it possible to clear local storage without refreshing page, but with reseting filtrify filter?

P.P.S This is my filtrify code:

$(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();
    }); 
});

[asmira]

 var edit = document.getElementById('itemfilter');
      $(edit).click(function() {
            localStorage.setItem('todoData', this.innerHTML);
            });

to
1. add full html

     $("ul.ft-field").click(function(){
          localStorage.setItem('todoData', $(this).html());
     });

or
2. add each li

         $("ul.ft-field").click(function(){
             $("li",this).each(function(){
                 localStorage.setItem('todoData', $(this).html());
             });
         }