如何在jquery UI中构建具有可保存状态的门户页面？

// 初始化jQuery UI拖放功能
$(function() {
  $( "#sortable" ).sortable({
    revert: true
  });
  $( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $( "ul, li" ).disableSelection();
});

// 保存门户页面状态
function savePortalState() {
  var portalState = [];
  $( "#sortable li" ).each(function() {
    portalState.push($(this).attr("id"));
  });
  localStorage.setItem("portalState", JSON.stringify(portalState));
}

// 加载门户页面状态
function loadPortalState() {
  var portalState = JSON.parse(localStorage.getItem("portalState"));
  if (portalState) {
    for (var i = 0; i< portalState.length; i++) {
      var widget = $("#" + portalState[i]);
      widget.appendTo("#sortable");
    }
  }
}

// 在用户更改门户页面布局时保存状态
$( "#sortable" ).on( "sortstop", function( event, ui ) {
  savePortalState();
});

// 在页面加载时加载门户页面状态
$(document).ready(function() {
  loadPortalState();
});