如何将动态添加的Div保存到另一个HTML文件并实现页面同步更新？

首先得说清楚，你当前的代码为啥不管用：$(".save").click(function() { $("#drag-right-2").load("demo-6-content.html"); }); 这段代码只是把外部的静态HTML加载到当前页面的Div里，但完全没保存你动态添加的列和拖拽元素的状态。HTTP是无状态的，新页面打开时会从头加载，根本不知道你之前做过哪些拖拽操作，自然显示不了更新后的内容。

要解决这个问题，核心是把用户拖拽修改后的布局状态持久化存储，然后在新页面加载时读取这个状态并渲染。下面分两种场景给你具体方案：

纯前端方案（无需后端，适合快速原型） #

如果你的需求不需要跨设备同步，只是在当前浏览器里保存状态，用localStorage就足够了。

步骤1：在当前页面保存拖拽后的布局 #

点击保存按钮时，把#drag-right-2里的完整HTML（包括动态列和拖拽元素）存到localStorage，然后跳转到新页面：

$(".save").click(function() {
  // 获取当前容器的完整HTML内容
  const savedLayout = $("#drag-right-2").html();
  // 存储到localStorage，用一个自定义的键名方便后续读取
  localStorage.setItem("customPageLayout", savedLayout);
  
  // 跳转到新页面（替换成你的实际页面路径）
  window.open("your-target-page.html", "_blank");
});

步骤2：在新页面加载保存的布局 #

新页面初始化时，读取localStorage里的内容，渲染到对应的容器中：

$(document).ready(function() {
  // 读取存储的布局内容
  const savedContent = localStorage.getItem("customPageLayout");
  if (savedContent) {
    // 把内容插入到新页面的对应容器（确保容器ID和当前页面一致，或者改成你实际的ID）
    $("#drag-right-2").html(savedContent);
    
    // 重要：如果拖拽元素需要事件（比如再次拖拽），要重新初始化拖拽插件
    // 假设你用的是jQuery UI Draggable，示例：
    $(".dragged-element").draggable();
  }
});

进阶优化：存储结构化数据而非纯HTML

如果你的布局比较复杂（比如需要记录元素的位置、属性等），建议把数据转成JSON存储，这样更灵活：

// 保存时收集结构化数据
$(".save").click(function() {
  const layoutData = [];
  // 遍历每一列
  $("#drag-right-2 .dynamic-column").each(function() {
    const column = {
      columnClass: $(this).attr("class"),
      elements: []
    };
    // 遍历列里的每个拖拽元素
    $(this).find(".dragged-item").each(function() {
      column.elements.push({
        content: $(this).html(),
        style: {
          top: $(this).css("top"),
          left: $(this).css("left")
        }
      });
    });
    layoutData.push(column);
  });
  // 转成JSON字符串存储
  localStorage.setItem("layoutData", JSON.stringify(layoutData));
  
  window.open("your-target-page.html", "_blank");
});

// 新页面加载时重建布局
$(document).ready(function() {
  const savedData = JSON.parse(localStorage.getItem("layoutData"));
  if (savedData) {
    const container = $("#drag-right-2");
    savedData.forEach(column => {
      const $column = $("<div>").addClass(column.columnClass);
      column.elements.forEach(item => {
        const $item = $("<div>").addClass("dragged-item").html(item.content).css(item.style);
        $column.append($item);
      });
      container.append($column);
    });
    // 重新初始化拖拽
    $(".dragged-item").draggable();
  }
});

后端存储方案（适合跨设备/多用户场景） #

如果需要把布局保存到服务器，让用户在不同设备都能访问，就需要后端配合：

步骤1：当前页面提交布局到后端 #

点击保存时，通过AJAX把布局数据发送到后端接口，存储到数据库：

$(".save").click(function() {
  const layoutContent = $("#drag-right-2").html();
  $.ajax({
    url: "/api/save-layout", // 替换成你的后端接口地址
    method: "POST",
    data: { content: layoutContent, userId: "your-user-id" }, // 可以传用户ID区分不同用户
    success: function(res) {
      // 保存成功后，带着布局ID跳转到新页面
      window.open(`your-target-page.html?layoutId=${res.layoutId}`, "_blank");
    },
    error: function(err) {
      console.error("保存失败：", err);
    }
  });
});

步骤2：新页面从后端获取布局 #

新页面加载时，通过URL参数里的layoutId请求后端接口，获取保存的布局并渲染：

$(document).ready(function() {
  // 从URL获取layoutId
  const urlParams = new URLSearchParams(window.location.search);
  const layoutId = urlParams.get("layoutId");
  
  if (layoutId) {
    $.ajax({
      url: `/api/get-layout/${layoutId}`, // 替换成你的后端接口地址
      method: "GET",
      success: function(res) {
        $("#drag-right-2").html(res.content);
        // 重新初始化拖拽逻辑
        $(".dragged-element").draggable();
      },
      error: function(err) {
        console.error("加载布局失败：", err);
      }
    });
  }
});

关键注意事项 #

• 事件绑定：动态渲染的元素之前的事件绑定会失效，必须用事件委托或者在渲染后重新初始化事件/插件。
• 存储清理：如果用localStorage，记得在不需要的时候清除数据（比如用户删除布局时），避免占用浏览器存储。
• 兼容性：localStorage在所有现代浏览器都支持，但如果是旧浏览器可能需要降级处理。

内容的提问来源于stack exchange，提问作者Dip Vyas