使用 Javascript 动态保存内容

Posted 2023-05-07

【中文标题】使用 Javascript 动态保存内容

【英文标题】：Save content dynamically with Javascript

【发布时间】：2011-08-29 12:22:07

【问题描述】：

我想让我的客户能够启动一个保存对话框来保存我在 javascript 中存储的数据。我无法将它们定向到现有文件，因为您无法直接使用 Javascript 修改文件系统。 是否可以直接发送数据进行保存（当然是通过保存对话。否则，这将是一个疯狂的利用）。我正在努力做到这一点，以便我的用户可以在我的网站上创建内容并能够下载它。

【参考方案1】：

您可以使用带有 dataUrl 的链接来创建保存链接：（这需要您使用 base64 对数据进行编码）

var a = document.createElement('a');
a.href = "data:text/plain;base64,"+base64_encode("plop");
a.innerhtml = "save";
document.body.appendChild(a);

你可以在http://phpjs.org/functions/base64_encode:358获取base64_encode函数。

用户需要右键单击链接并选择“另存为...”以将文件保存在他们的文件系统中。

【讨论】：

这是否意味着您首先需要将 Javascript 中的数据保存到与 a.href 一起使用的 URL 中？

是的，但是您可以通过在 mousedown 事件上设置 href 来解决此问题。或者您可以有 1 个按钮来生成链接的 href 并显示它。

我知道Javascript中有一些数据，比如var data = "ABCDEF";，这些数据应该存储在本地文件中。因此，无法通过 URL 访问数据。要通过 URL 访问它们，您首先需要将它们上传到 URL，然后才能通过 href 获取它们。

【参考方案2】：

您可以创建一个保存按钮，然后提供一个下载对话框。通过允许用户再次上传文件并解析其内容，您可以加载您的应用程序。

【参考方案3】：

有几种方法可以做到这一点：

服务器端

用unique id将序列化的表单数据（或任何数据）存储在数据库中，并将ID提供给用户，当他想要加载时，他会提供ID，然后你会鞭打他的数据。 帐户系统，假设您有帐户系统，您可以将每个表单数据链接到特定用户。 以某种方式将数据序列化，并作为可下载的文件提供给用户，然后当他要恢复时，他会上传文件，您解析它，并显示给他。

当然，这两种解决方案都需要 AJAX 解决方案来与服务器通信。

客户端

如果您的网站是现代的（您不关心旧浏览器），您可以使用Local Storage 将他的输入保存在他的计算机上，然后在他返回时自动从他的内存中加载它。请注意，浏览器支持不是很好，您应该使用Modernizr 或类似的东西来测试它。

【参考方案4】：

如何使用服务器会话并根据 DialogId 和 SessionId 在其中存储内容。

流程： 1.用户存储信息。 session_id[dialog_id] = 2.用户检索信息。 = session_id[dialog_id]

您可以使用 json 和 base64 来传输批量和结构信息。

【参考方案5】：

我想您想将数据保存在客户端计算机上的文件中。 您不能直接这样做，因为 JS 无法访问本地文件系统。 但是你可以通过服务器来实现它。你会同时 将数据发送到服务器并下载到 客户。下载打开通常的“另存为...”对话框，其中客户端 可以指定文件名。

一个可能的具体实现使用了一个 POST 的表单 请求到 URL save.php，传递要保存的数据 一个隐藏的输入字段save_data。请求的结果是 指向一个看不见的<iframe>。

<form action="save.php" method="post" target="save_target" onsubmit="save();">
    <input type="hidden" id="save_data" name="save_data" value="" />
</form>

<iframe id="save_target" name="save_target" src="#" 
    style="display:none; width:0; height:0; border:0px solid #fff;">
</iframe>

JS函数save()准备要发送的数据：

function save() 
    document.getElementById("save_data").value = ...;       
    return true; // or false if something wrong
;

服务器上的PHP页面save.php处理POST请求并下载 数据：

$data = $_POST['save_data'];
$size = strlen($data);
$contentType = "text/plain"; // MIME type
$defaultName = "x.txt";

header("Content-Type: $contentType"); 
header("Content-Disposition: attachment; filename=$defaultName"); 
header("Content-Length: $size");    
echo $data;