使用Javascript动态保存内容

Save content dynamically with Javascript

本文关键字：保存 动态 Javascript 使用      更新时间：2023-09-26

我想让我的客户端能够有一个保存对话框来保存我在Javascript中存储的数据。我不能把它们指向一个现有的文件，因为你不能直接用Javascript修改文件系统。
是否有可能直接发送要保存的数据(当然是通过保存对话框)?否则，这将是一个疯狂的漏洞)。我想让我的用户可以在我的网站上创建内容，并能够下载。

您可以使用带有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函数。

用户需要右键单击链接并选择"另存为…"来将文件保存到他们的文件系统中。

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

有几种方法:

服务器端

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

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

客户端

  • 如果你的网站是现代的(你不关心旧的浏览器)，你可以使用本地存储来保存他的输入在他的计算机上，然后自动加载它从他的内存当他回来。请注意，浏览器支持不是很好，你应该使用Modernizr或类似的东西来测试它。

如何使用服务器会话并基于dialgid和SessionId在那里存储内容?

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

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

我假设您想将数据保存在客户端计算机上的文件中。您不能直接这样做，因为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;
相关文章：