Javascript jQuery-两列-可排序和cookie？

在我的页面上，我有两种专栏，其中有几个读者。 现在我希望能够在这两列中对这些容器进行排序。 这其实不是个问题。 我可以在两个列中对容器进行分类，并将其打开或关闭。 但现在我的问题是： 我想在重新装货时对我的集装箱进行分类。 我想排序和切换它们的顺序与重新加载之前相同。 所以我需要一块饼干。但我不知道怎么做

请看一下我的代码：

    <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 imperdiet. 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>

身体{
字体大小：12px；
字体系列：helvetica、verdana、arial、无衬线字体；
}
h3{
保证金：0；
垫面：5px；
垫底：5px；
左侧填充：5px；
字体大小：12px；
字体大小：粗体；
}
#左框{
宽度：300px；
浮动：左；
}
#右框{
宽度：300px；
浮动：左；
}
.框边{
边框：1px实心#333；
左边距：5px；
右边距：5px；
边缘顶部：10px；
}
.货柜头{
背景：#efef；
光标：移动；
}
.集装箱顶盖跨度{
光标：指针；
浮动：对；
利润上限：-20px；
右边距：5px；
文字装饰：下划线；
}
$（文档）.ready（函数（）{
$（“.sortable列”）.sortable({
连接方式：'.sortable列'
});
});
功能切换内容（容器id）{
$（“#”+容器id+”.container content'）.toggle（）；
}
1号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

箱号2
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

3号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

箱子编号4
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

第5号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

第6号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

7号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

8号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

九号信箱
切换
Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。这是我的名言。乌尔特里斯猫、设施猫、智者亨德雷特·利奥猫、生活必需品

---

我如何设置饼干？我对javascript、sry了解不多。

如果您已经使用jQuery，请查看cookie插件：

我在一个项目中使用了它，它非常有用

当然，为了看看它是否有效，你可以使用firebug的cookie插件