Remember jQuery Tablesorter drop-down selection using jQuery Cookie?

Question

I'm using two jQuery Tablesorter drop-downs to filter results of a dynamically-generated table. When a name in either drop-down is selected, only results containing that name will show.

What I want is for jQuery Cookie to remember the last selected filter option for each drop-down before the page was reloaded. If the name "Alaina " (seen in the attached picture) was the selected option for the "Assigned to" drop-down before the user left the page, I want "Alaina" to be the default option when the user goes back to the page.

Currently when the page loads, the default "Filter" selection is loaded, and thus no results are filtered.

The output of the drop-down for the "Assigned to" column (the drop-down for the "Expeditor" column has the same structure, only its id is msdrpdd20 instead of msdrpdd21):

<td>
  <div id="msdrpdd21_msddHolder" class="ddOutOfVision">
    <select id="msdrpdd21" class="tablesorter-filter" data-column="3" tabindex="-1">
      <option value=""> … </option>
      <option value="(none)"> … </option>
      <option value="Alaina"> … </option>
      <option value="Alyssa"> … </option>
      <option value="Felicita"> … </option>
      <option value="Luciana"> … </option>
      <option value="Rachel"> … </option>
    </select>
  </div>
  <div id="msdrpdd21_msdd" class="dd ddcommon borderRadius" tabindex="0">
    <div class="ddTitle borderRadiusTp">
      <span id="msdrpdd21_title" class="ddTitleText ">
        <span class="ddlabel">
          (none)
        </span>
        <span class="description" style="display: none;"></span>
      </span>
    </div>
    <input id="msdrpdd21_titleText" class="text shadow borderRadius" type="text" autocomplete="off" style="display: none;"></input>
    <div id="msdrpdd21_child" class="ddChild ddchild_ border shadow" style="display: none;">
      <ul>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_ selected"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
        <li class="enabled _msddli_"> … </li>
      </ul>
    </div>
  </div>
</td>

EDIT (07/29/13): Screenshot of Nev's cookie:

EDIT (08/01/13): Screenshot of Nev's revision:

Filtering of results (via Tablesorter Filter):

$( '#todo-list' ).tablesorter( {
    widgets: ["filter"],
    widgetOptions : {filter_reset : '.reset'}
} );

Answer 1

Nev's answer is what lead me to this point, and without his help I wouldn't have (stupidly) figured this out.

tablesorter is called with the following function:

$('table').tablesorter( {
    widgets: ["filter"],
    widgetOptions : {filter_reset : '.reset'}
}); 

In order to save your last Filter selection, the following code has to be placed before the above call:

$('table')
    .bind('filterInit', function () {
        // check that storage utility is loaded
        if ($.tablesorter.storage) {
            // get saved filters
            var f = $.tablesorter.storage( this, 'tablesorter-filters' ) || [];
            $.tablesorter.setFilters( this, f, true );
        }
    })
    .bind('filterEnd', function () {
        if ($.tablesorter.storage) {
            // save current filters
            var f = $.tablesorter.getFilters( this );
            $.tablesorter.storage( this, 'tablesorter-filters', f );
        }
    });

Answer 2

Using JQuery Cookie:

$(document).ready(function (e) {
    data = $("#payments").msDropdown().data('dd');
    if ($.cookie("table-sorter") !== null) {
        var toselect = $.cookie("table-sorter");
        data.set('selectedIndex', toselect);
    }

    $('#payments').change(function () {
        var selected = this.selectedIndex;
        // save value to cookie
        $.cookie("table-sorter", selected, { path: '/' });
    });


});

Here is the Fiddle (works in Firefox but not IE). The code however works if you upload it to your own server (tested in IE).