How would I make a cookie to save the position of these div tags?

I am using JQuery to have the ability to reorder my divs (code below), but I need to make a cookie to save the order of these divs. I see alot of site coming up with Javascript stuff, but its usually saying things like save an inputted name and such. I have no clue how to go about doing this.

$().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.ne开发者_如何学编程xt().after(current);
    });
});

Each moveable div follows this pattern (The div's also have hide/show on em, but ignore that for the time being):

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

I'd use a JSON representation of your layout, but beware, cookies can only hold 4K of data. You're best storing it on the server or using local storage.

Depending on the number of permutations, you could create a hash of key->value pairs in your jquery code, where each value would be an ordering of the the divs, and the key would be what you store in the cookie.