如何在页面重新加载时保留 Javascript 生成的 HTML？答案

【问题标题】：How to keep HTML generated by Javascript on page reload?如何在页面重新加载时保留 Javascript 生成的 HTML？
【发布时间】：2012-10-03 05:01:37
【问题描述】：

我的问题很简单，但我没有找到适合我正在寻找的答案。这基本上是我的情况：

我有一个包含表单的 HTML 页面。使用 jQuery 和 AJAX，我提交我的表单，并使用一些 javascript 代码，我更改了我的 div 的 HTML 内容。所有这些都无需在按下 F5 / Ctrl-R / Cmd-R 时重新加载页面即可完成。

以下是更改 HTML 内容的 .js 代码示例：

$.ajax({
    type: "POST",
    url: "/management/uploadFile",
    dataType: "JSON",
    data: "uploadedFile="+uploadedFile,
    cache: false,
    success: 
    function(data){
        $('#mydiv').html(change_html(data));
    },
});

function change_html(data)
{
    var html;

    html += '<div id="mydiv">';
    html += 'Hello World !<br/>';
    html += '</div>';
    return html;
}

事实是，如果我手动重新加载页面，我的“动态”HTML 内容不会保留，我会看到我的表单。

我对网络开发很陌生，我确定我错过了一些关于这个的东西。有人可以指导我或给我一些关于我的案例的提示吗？

谢谢！

【问题讨论】：

标签： javascript jquery html ajax codeigniter

【解决方案1】：

简短的回答是您不能在刷新时保持 DOM 的状态。不过，您可以做很多事情来修复：

查看在页面加载时调用 AJAX 方法，该方法抓取服务器上持久保存的数据以重绘动态页面。
将数据存储在客户端浏览器的会话中，重新加载时检索该数据并重新绘制动态页面。您可以使用许多持久保存到会话存储的工具来实现这一点。

【讨论】：

【解决方案2】：

我过去解决这个问题的方法是使用backbone.js 模型并在其中存储任何数据。

【讨论】：

【解决方案3】：

由于 HTML 是使用回调 change_html 动态生成的，因此无法在页面重新加载期间保留它。这就是它具有良好动态性的本质。

【讨论】：

【解决方案4】：

是否有任何机会，因为您无论如何都在使用 ajax，您可以将数据转储到 php 会话中并在再次需要时重新调用和/或使用 ajax 重新格式化它？

【讨论】：

我可以这样做，但我想避免在会话中存储太多东西。
如果您要存储从一页到下一页的大量数据，那么查看数据库来存储数据可能是明智的？不完全确定您的应用程序是什么以及最合适的应用程序。