How to use local storage to retain checkbox states for filtering items

问题

I've got a list of links on a main page that can be filtered via different checkboxes. I would like to retain the states of all the checkboxes when a user clicks on one of the links to a new URL and then back to this main page.

I've got two problems that I can't seem to fix:

Results that share a class won't always be displayed when un-checking inputs (un-check In-App then In-Stream and the only result for In-Banner is Link 1, when it should be #1 and #3)
I can't seem to get the Check/Uncheck All feature to work with the localStorage in order to retain user selections. Been trying a number of things and nothing is working for me.

Pardon if my code isn't totally consistent; been learning and trying new things. Any help or suggestions are appreciated.

Here's what I've got going so far, with some of it based on this previous post... saving checkbox state on reload

Fiddle here... http://jsfiddle.net/JFlo/689rA/

HTML

<fieldset class="tags">
<p><label><input type="checkbox" id="check-all" class="checkAll" checked /><span>Select All</span></label></p>
<p><label><input type="checkbox" class="filter" id="in-app" checked />In-App</label></p>
<p><label><input type="checkbox" class="filter" id="in-stream" checked />In-Stream</label></p>
<p><label><input type="checkbox" class="filter" id="in-banner" checked />In-Banner</label></p>
</fieldset>

<ul class="results">
<li class="in-banner"><a href="/link/within_site/" >Link 1</a></li>
<li class="in-stream"><a href="/link/within_site/" >Link 2</a></li>
<li class="in-stream in-banner"><a href="/link/within_site/" >Link 3</a></li>
<li class="in-app"><a href="/link/within_site/" >Link 4</a></li>
</ul>

function getStorage(key_prefix) {
// this function will return us an object with a "set" and "get" method
// using either localStorage if available, or defaulting to document.cookie
if (window.localStorage) {
    // use localStorage:
    return {
        set: function(id, data) {
            localStorage.setItem(key_prefix+id, data);
        },
        get: function(id) {
            return localStorage.getItem(key_prefix+id);
        }
    };
} else {
    // use document.cookie:
    return {
        set: function(id, data) {
            document.cookie = key_prefix+id+'='+encodeURIComponent(data);
        },
        get: function(id, data) {
            var cookies = document.cookie, parsed = {};
            cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
                parsed[key] = unescape(value);
            });
            return parsed[key_prefix+id];
        }
    };
}
}

jQuery(function($) {
var $inputs = $('input.filter'), $checkall = $('input.checkAll'), $storedData = getStorage('web_checkboxes_');

// Check/Uncheck All events
$checkall.live('change', function(){

    // Change text for Check All box
    $(this).next().text( this.checked ? 'Uncheck All' : 'Check All');

    // Set Input Filter
    $inputs.attr('checked', this.checked ? 'checked' : ''); // This line not working in newer versions of jQuery
    // Toggle visibility of all results
    var $lis = $('.results > li').toggle();

    // Toggle checkboxes
    $lis.toggle($(this).is(':checked'));
});        

// Individual input events
$inputs.live('change', function(){
    // Change text for Check All box
    $inputs.length === $inputs.find(':checked').length 
        ? $checkall.attr('checked', 'checked').next().text('Uncheck All') 
        : $checkall.removeAttr('checked').next().text( 'Check All' );

    $('.results .'+this.id).toggle($(this).is(':checked'));
    $storedData.set(this.id, $(this).is(':checked')?'checked':'not');
    //For each one checked
}).each(function(){
    //var $lis = $j('.results > li').hide();
    //$lis.filter('.' + $j(this).attr('ID')).show();
    var val = $storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
});


});

回答1:

I got...

// 4/11
$j('.tags').delegate('input:checkbox', 'change', function(){
    var $lis = $j('.results > li').hide();
    $j('input:checked').each(function(){
        $lis.filter('.' + $j(this).attr('ID')).show();
    });
});
// 4/11
$checkall.live('change', function(){
    $storedData.set(this.id, $j(this).is(':checked')?'checked':'not');
    $inputs.attr('checked', this.checked ? 'checked' : '');
    $j(this).next().text( this.checked ? 'Uncheck All' : 'Check All');
    var $lis = $j('.results > li').hide();
    //For each one checked
     $inputs.each(function(){
        $lis.filter('.' + $j(this).attr('ID')).show();
        $storedData.set(this.id, $j(this).is(':checked')?'checked':'not');
        var val = $storedData.get(this.id);
        if (val == 'checked') $j(this).attr('checked', 'checked');
        if (val == 'not') $j(this).removeAttr('checked');
        if (val) $j(this).trigger('change');
    });
});

// 4/11
$inputs.live('change', function(){
    $storedData.set(this.id, $j(this).is(':checked')?'checked':'not');
}).each(function(){
    var val = $storedData.get(this.id);
    if (val == 'checked') {
        $j(this).attr('checked', 'checked');
        $checkall.attr('checked');
    }
    if (val == 'not') {
        $j(this).removeAttr('checked');
        $checkall.removeAttr('checked');
    }
    if (val) $j(this).trigger('change');
});

来源：https://stackoverflow.com/questions/10096745/how-to-use-local-storage-to-retain-checkbox-states-for-filtering-items

标签

jquery

checkbox

filtering

local-storage