HOw to use localStorage to create an array used to hide certain table rows

HOw to use localStorage to create an array used to hide certain table rows

I am trying to use localStorage values created on one page to hide table rows on another page based on similar text strings.  It is a sharepoint page so the html is very verbose and hard to find the correnct elements.  I've set up a fiddle here to the best of my ability 


I have the local storage piece working from the first page but am having trouble using it as an array to indexOf values on the second page to determine which table rows should be hidden.  Lots of trouble...

Here is the script I've written to try to do this.  All the verbose html I left for jsfiddle because its overwhelming the woods.

//THIS updates LOCALSTORAGE AFTER EACH CHECKBOX CLICK.  USE ON PAGE 1

$(document).ready(function () {


    $(":checkbox").click(function () {
        var arr = [];
        $("input:checkbox:checked").each(function () {
            arr.push($(this).parent().parent().parent().find('nobr').text());
        });

        localStorage.setItem("key", arr);
        alert("localStorage= " + localStorage.getItem("key")); // SHOWS US WHAT IS IN ARRAY
    });
//THIS TRIES TO GET LOCALSTORAGE FROM ABOVE AND HIDE TR ELEMENTS WHOSE A ELEMENT TEXT VALUES ARE NOT PART OF ARRAY Fro PAGE 1

$("#filter").click(function () {
    var arr1 = localStorage.getItem("key");
    //alert(arr1);
    var attrText = $(".s4-itm-cbx").attr("title");
    // alert(attrText);
    $(attrText).each(function () {
        if (jQuery.inArray( attrText, arr1 )==-1)    
        $(this).parent().parent().parent(). hide();

    });
});


});