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

在jQuery UI中构建具有可保存状态的门户页面，可以通过以下步骤实现：

使用jQuery UI的拖放功能创建门户页面。
使用浏览器的本地存储功能（localStorage或sessionStorage）保存用户对门户页面的更改。
在用户加载门户页面时，从本地存储中读取之前保存的状态信息，并将其应用到页面上。

以下是一个简单的示例代码：

// 初始化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();
});

在这个示例中，我们使用jQuery UI的拖放功能创建了一个可排序的门户页面。我们还使用了浏览器的本地存储功能来保存和加载门户页面的状态。当用户更改门户页面布局时，我们会保存其状态。当用户重新加载页面时，我们会从本地存储中读取之前保存的状态信息，并将其应用到页面上。

这只是一个简单的示例，实际应用中可能需要更复杂的状态管理和数据存储机制。但是，这个示例应该足够让您了解如何在jQuery UI中构建具有可保存状态的门户页面。