jQuery Cookie with 'iGoogle/Netvibes' UI

Question

Hi, I have this single-page site that has 4 columns with draggable/droppable/collapsible boxes. I can drag and drop boxes in any of the 4 columns and collapse/expand the boxes. The interface actually works real fine. I'm now trying to get jQuery Cookie to remember the placement of the boxes, how the users have rearranged the boxes and if boxes were collapsed or expanded.

Here's the jQuery:

$(function(){
 $('.dragbox')
 .each(function(){
  $(this).hover(function(){
   $(this).find('.dragbox');
  }, function(){
   $(this).find('.dragbox');
  })
  .find('h2').hover(function(){
  })
  .click(function(){
   $(this).siblings('.dragbox-content').toggle();
  })
  .end()
 });
 $('.column').sortable({
  connectWith: '.column',
  handle: 'h2',
  cursor: 'move',
  placeholder: 'placeholder',
  forcePlaceholderSize: true,
  opacity: 0.4,
  stop: function(event, ui){
   $(ui.item).find('h2').click();
   var sortorder='';
   $('.column').each(function(){
    var itemorder=$(this).sortable('toArray');
    var columnId=$(this).attr('id');
    sortorder+=columnId+'='+itemorder.toString()+'&';
   });
  }
 })
 .disableSelection();
});

How would you modify this in order to save/edit cookies and have the boxes displayed the same when the user visits again or refreshes the page?

Thanks a lot! Jon