如何使用本地存储来保留过滤项的复选框状态 [英] How to use local storage to retain checkbox states for filtering items

问题描述

我有一个主页上的链接列表，可以通过不同的复选框进行过滤。我想保留所有复选框的状态，当用户点击其中一个链接到一个新的URL，然后回到这个主页。

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:

1. 当
   取消检查输入（取消选中应用内，然后In-Stream，而横幅中唯一的
   结果为链接1时，共享类的结果不会总是显示它应该是＃1和＃3）


2. 我似乎无法获得检查/取消选中所有功能与
   localStorage一起工作，以保留用户选择。

如果我的代码不完全一致，请原谅;一直在学习和尝试新事物。

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

在这里转义。
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>

JS

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');
});


});​

推荐答案

我有...

// 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');
});

这篇关于如何使用本地存储来保留过滤项的复选框状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！