ローカルストレージを使用して項目をフィルタリングするためのチェックボックスの状態を保持する方法

Question

メインページには、異なるチェックボックスでフィルタリングできるリンクのリストがあります。ユーザーが新しいURLへのリンクの1つをクリックしてからこのメインページに戻ると、すべてのチェックボックスの状態を保持したいと思います。

私は修正することができないよう二つの問題持って

：クラスを共有

1. 結果は常にその後、アプリ内 未チェックの入力（未チェック表示されませんがIn-Streamの結果が の場合、In-Bannerの結果はリンク1です。
2. Check/Uncheck All機能をローカルの の順番で使用することはできませんユーザの選択を保持する。何度も試してみたところ、何も私のために働いていません。

私のコードが完全に一貫していない場合、新しいことを学び、試しています。どんな助けや提案も感謝しています。ここで

が...この前のポストに基づいて、それのいくつかと、これまでのところ、ここで 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'); 
}); 


});​ 

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