C#.net - How can I store the checkbox state in a cookie, then restore the checkbox values from cookie and update the page upon return?

I've done a lot of google-fu and have come across this and this and many other sources, but nothing quite what I'm looking for.

I am using:

• c#.net


• web forms


• javascript/jQuery


• ajax


• knockout.js for binding

Storing the state of the checkbox is simple enough, but depending on what checkbox is checked does alter the state of the page. I'm using checkboxes as a way for the user to filter by category (think Amazon shopping, filter by: color, size, etc). If the user checks a checkbox, ajax updates a div with the corresponding results. If the user navigates away from this page and comes back, I want to restore all of the checkbox states as well as the results.

Here is my markup:

    <div id="chkFilter">
        <h4>Speed</h4>
        <div style="width: 260px; padding-left: 10px;">
            <label><input type=checkbox name=project_speed value=some_value> Some Value</label>         
            <label><input type=checkbox name=project_speed value=some_value> Some Value</label>  
            <label><input type=checkbox name=project_speed value=some_value> Some Value</label>         
            <label><input type=checkbox name=project_speed value=some_value> Some Value</label>         

        </div>

        <br />
        <h4>Projects</h4>
        <div id="Projects" style="width: 260px; padding-left: 10px; font-style: normal">
            <label><input type=checkbox name=project_tag value=some_value> Some Value</label>         
            <label><input type=checkbox name=project_tag value=some_value> Some Value</label>         
            <label><input type=checkbox name=project_tag value=some_value> Some Value</label>         

        </div>
    </div>



    <div id="oppySearchResults" style="position: absolute; top: 78px; width: 700px; left: 400px;">
        <br />

        <table data-bind="foreach: projects">

            <tbody>
                <tr><td><a data-bind="attr: { href: '/tools/oppy/' + guid }" style="font-size: 25px;"><span class="link" data-bind="value: guid, text: name"></span></a></td></tr>
                <tr data-bind="text: projectDescription"></tr>
                <tr data-bind="text: guid"></tr>
            </tbody>
        </table>

    </div>

JavaScript:

<script>
    var proj;
    var c2 = $('#oppySearchResults');
    var original = c2.html();

    LoadCheckboxes();

    //load initial project state from server
    $.ajax("/api/project/", {
        type: "POST",
        data: JSON.stringify({
            action: "getProjects"
        })
    }).done(function (response) {
        proj = response;
        ko.applyBindings(new ProjectViewModel(proj), c2[0]);

    });

    function ProjectViewModel(proj) {
        //console.log(proj);
        var self = this;
        self.projects = ko.observableArray(proj);
    };

//check click event
    $(function () {

                $("#chkFilter").on("click", "input", function (e) {
            var filterCheckboxes = new Array();
            $("#chkFilter").find("input:checked").each(function () {
                filterCheckboxes.push(" " + $(this).prop("name") + "=" + $(this).val() + ", ");
            });

            StoreCheckbox();
            filterObj = {};
            filterObj.action = "updateProjects";
            filterObj.list = filterCheckboxes;
            var filtersStringify = JSON.stringify(filterObj)
            $.ajax({
                url: "/api/project/",
                type: "POST",
                data: filtersStringify,
            }).done(function (response) {
                proj = response;
                //console.log(proj);
                ko.cleanNode(c2[0]);
                c2.html(original);
                ko.applyBindings(new ProjectViewModel(proj), c2[0]);

            });
        });
    });

    function StoreCheckbox() {
        var data = $('input:checked').map(function () {
            return this.value;
        }).get();
        localStorage['data'] = JSON.stringify(data);
        console.log(localStorage['data']);
    }

    function LoadCheckboxes() {
        console.log(localStorage['data']);
        if (localStorage && localStorage["data"]) {
            var localStoredData = JSON.parse(localStorage["data"]);
            var checkboxes = document.getElementsByName('project_speed');
            for (var i = 0; i < checkboxes.length; i++) {
                for (var j = 0; j < localStoredData.length; j++) {
                    if (checkboxes[i].value == localStoredData[j]) {
                        checkboxes[i].checked = true;
                    }
                }
            }
            localStorage.removeItem('data');
        }
    }
</script>

Local Storage did store the state of the checkbox, but it was not quite what I wanted. The ajax call that happens after "//check click event" sends the checkbox values to the server, retrieves the data in JSON and binds it to knockout which binds to the table in my markup according to what's checked, so if the user returns to the page, I want to display their latest filtering results & checked boxes.

Thank you in advance.