I can save to a cookie, but can't work out how to load the values and render the sortables in the right order.

Any ideas?

Code:
<!-- Example JavaScript files -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<!-- Example jQuery code (JavaScript)  -->
<script type="text/javascript">

$(document).ready(function(){
  
  	// Get items
	function getItems(exampleNr)
	{
		var columns = [];

		$(exampleNr + ' ul.sortable-list').each(function(){
			columns.push($(this).sortable('toArray').join(','));				
		});

		return columns.join('|');
	}

	// Load items from cookie
	function loadItemsFromCookie(name)
	{
		if ( $.cookie(name) != null )
		{
			renderItems($.cookie(name));
		}
		else
		{
			
		}
	}

 
  // load positions form cookies
  $('#example-1-4 .sortable-list').each( function( index ){
	loadItemsFromCookie('welling');
  });

	// Example 1.4: Sortable and connectable lists (within containment)
	$('#example-1-4 .sortable-list').sortable({ 
	handle : '.handle',
        connectWith: '#example-1-4 .sortable-list', 
        containment: '#containment' , 
        update: function(){ 
            $.cookie('welling', getItems('#example-1-4'), {expires: 999}); 
        } 
    }); 

});

</script>
Code:
<div id="example-1-4">

				<div id="containment">

					<div class="column left first">

							<ul class="sortable-list">
						<li class="sortable-item" id="A"> <img src="move.png" class="handle" alt="move" /> Sortable item A</li>
						<li class="sortable-item" id="B">  <img src="move.png" class="handle" alt="move" /> Sortable item B</li>
					</ul>

					</div>

					<div class="column left">

							<ul class="sortable-list">
						<li class="sortable-item" id="C"> <img src="move.png" class="handle" alt="move" /> Sortable item C</li>
						<li class="sortable-item" id="D"> <img src="move.png" class="handle" alt="move" /> Sortable item D</li>
					</ul>

					</div>

					<div class="column left">

					<ul class="sortable-list">
						<li class="sortable-item" id="E"> <img src="move.png" class="handle" alt="move" /> Sortable item E</li>
					</ul>

					</div>

					<div class="clearer">&nbsp;</div>

				</div>
                
			</div>