jQuery - two columns - sortable and cookie?

On my page I have two kind of columns with several conainers in it. Now I want to be able to sort these containers in these two columns. This was not really a problem. I can sort my containers in the two colums and toggle it on or off. But now my problem: I want to sort my containers on reload. I want to sort and toggle them the same order like before reload. So I need a cookie. But I have no idea how to do this.

Please have a look at my code:

    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>

    <style>
        body{
            font-size:12px;
            font-family:helvetica,verdana,arial,sans-serif;
        }

        h3{
            margin:0;
            padding-top:5px;
            padding-bottom:5px;
            padding-left:5px;
            font-size:12px;
            font-weight:bold;
        }

        #box-left{
            width:300px;
            float:left;
        }

        #box-right{
            width:300px;
            float:left;
        }

        .box-border{
            border:1px solid #333;
            margin-left:5px;
            margin-right:5px;
            margin-top:10px;
        }

        .container-header{
            background:#efefef;
            cursor:move;
        }

        .container-header span{
            cursor:pointer;
            float:right;
            margin-top:-20px;
            margin-right:5px;
            text-decoration:underline;
        }
    </style>


    <script type="text/javascript">

        $(document).ready(function() {
            $(".sortable-column").sortable({
                connectWith: '.sortable-column'
            });
        });

        function toggleContent(container_id){
            $('#' + container_id + ' .container-content').toggle();
        }

    </script>



    <div id="box-left" class="sortable-column">

        <div id="container1" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 1</h3>
                <span onclick="toggleContent('container1')">toggle</span>
            </div>

            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container2" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 2</h3>
                <span onclick="toggleContent('container2')">toggle</span>

            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container3" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 3</h3>

                <span onclick="toggleContent('container3')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container4" class="box-border">
            <div class="container-header">

                <h3>Box Nummer 4</h3>
                <span onclick="toggleContent('container4')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdi开发者_开发问答et. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>

    </div>
    <div id="box-right" class="sortable-column">

        <div id="container5" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 5</h3>
                <span onclick="toggleContent('container5')">toggle</span>
            </div>

            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container6" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 6</h3>
                <span onclick="toggleContent('container6')">toggle</span>

            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container7" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 7</h3>

                <span onclick="toggleContent('container7')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>
        <div id="container8" class="box-border">
            <div class="container-header">

                <h3>Box Nummer 8</h3>
                <span onclick="toggleContent('container8')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
            </div>
        </div>

        <div id="container9" class="box-border">
            <div class="container-header">
                <h3>Box Nummer 9</h3>
                <span onclick="toggleContent('container9')">toggle</span>
            </div>
            <div class="container-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>

            </div>
        </div>

    </div>

How can I set the cookie? I don't know much about javascript, sry.

If you already use jQuery, take a look at the cookie plugin:

http://plugins.jquery.com/project/cookie

I used it in a project, and it was very useful.

And of course, to see if it worked, you can use the cookie plugin for firebug, Firecookie