Javascript 如何制作cookie来保存这些div标记的位置？

我使用JQuery来重新排序我的div（下面的代码），但是我需要制作一个cookie来保存这些div的顺序。我看到很多网站都推出了Javascript内容，但通常都会说保存输入的名称之类的话。我不知道该怎么做

$().ready(function() {
    $('.moveUpCls').click(function(event){
      var current = $(this).parent().parent().parent();
      current.prev().before(current);
    });
    $('.moveDownCls').click(function(){
      var current = $(this).parent().parent().parent();
      current.next().after(current);
    });
});

每个可移动div都遵循此模式（div的em上也有hide/show，但暂时忽略此模式）：

DIV的内容

我会使用JSON表示您的布局，但请注意，Cookie只能保存4K的数据。您最好将其存储在服务器上或使用本地存储。

根据排列的数量，您可以在jquery代码中创建一个密匙->值对的散列，其中每个值都是div的顺序，密匙就是您存储在cookie中的密匙。

为每个div指定一个唯一的id。单击moveUp/moveDown后，获取div的当前顺序，并将其另存为字符串（myOrder='4,12,2,1'）。将此字符串写入cookie。那么之前的div是什么？这是我第一次跳到饼干，所以精心制作将是伟大的！

<div>
    <div id="tabHeader">

        <div id="headMoveUp"><a class="moveUpCls"><img src="images/uparrow.png"></a></div>
        <div id="headMoveDown"><a class="moveDownCls"><img src="images/downarrow.png"></a></div>
        <a href="javascript:toggle();"><div id="tabHeadText">Important Links &raquo;</div> </a>

    </div>
        <div id="toggleText" style="display:none; text-align:center;">
            <div id="empGuide" style="text-align:center;margin-left:auto; margin-right:auto;">

                CONTENT OF DIV

            </div>
        </div>
        <br />

</div>