如何在javascript上为点击和切换功能创建cookie？

Question

我找不到解决问题的方法。我想为后续功能创建一个cookie。

我需要为每个点击功能及其变量添加一个cookie。如果页面上有变化，下次访问时应保持原样。

有人可以帮帮我吗？

JSFiddle Demo

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<div id="m">
    <div id="cbb"></div> <a href="#" id="cb">cb</a>

    <div id="cbf"></div>
</div>
<div id="f">
    <div id="ft"> <a href="#" id="fh">fh</a>
 <a href="#" id="fs">fs</a>

    </div>
</div>

<style>
    body {
        margin: 0;
        padding: 0;
    }
    #m {
        background: grey;
        position: absolute;
        top: 0px;
        bottom: 100px;
        width: 100%;
    }
    #cbb {
        height: 50px;
        width: 50px;
        background: green;
    }
    #cb.hide {
        background: red;
    }
    #cbf {
        height: 50px;
        width: 50px;
        background: red;
    }
    #ft {
        background: yellow;
    }
    #fs {
        display: none;
    }
    #f {
        position: fixed;
        height: 100px;
        width: 100%;
        background: purple;
        bottom: 0;
    }
</style>

<script>
    function setCookie(cookie_name, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cookie_name + "=" + cvalue + "; " + expires;
    }
    $.fn.toggleAttr = function (attr, attr1, attr2) {
        return this.each(function () {
            var self = $(this);
            if (self.attr(attr) == attr1) self.attr(attr, attr2);
            else self.attr(attr, attr1);
        });
    };
    jQuery("window").ready(function ($) {
        /* Toggle */
        $('#cb').click(function () {
            $('#cbf').stop(true, true).slideToggle(500);
            $('#cbb').toggle();
            $('#cb').toggleClass('hide');
            $('#cb').toggleAttr('title', 'Hide', 'Show');
        });
        /* Hide and show */
        $('#fh').click(function () {
            $('#f').css('height', '15px');
            $('#m').css('bottom', '15px');
            $('#fh').css('display', 'none');
            $('#fs').css('display', 'block');
        });
        $('#fs').click(function () {
            $('#f').css('height', '100px');
            $('#m').css('bottom', '100px');
            $('#fs').css('display', 'none');
            $('#fh').css('display', 'block');
        });
    });

</script>