在客户端保存 Javascript FormData() 对象答案

【问题标题】：Saving Javascript FormData() Object on client side在客户端保存 Javascript FormData() 对象
【发布时间】：2018-10-11 11:23:38
【问题描述】：

我有一个 html 页面，其中包含一个带有一些文本和文件输入元素的表单元素。
这是使用此处建议的方法通过 ajax 调用提交给服务器的：How can I upload files asynchronously?
正如您在上述链接的引用页面中看到的那样，FormData() 对象用作输入数据的容器，我已经成功完成了这项工作。
但是现在我们要创建一个包含这些 html 元素的新页面，将文本和文件输入保存在客户端（Cookie 或 Local Strorage 或......）并稍后在另一个页面上进行 ajax 提交。
我无法将 new FormData() 保存在 cookie 或本地存储中；保存的是一个小字符串：“[object FormData]”，而不是输入的文件和字符串。
我也尝试使用 JSON.stringify() 没有成功；它只是返回了一个空的 JSON("{}")。
（代码使用jQuery选择器）

var postData = new FormData($(form)[0]);
// var sPostedData = JSON.stringify(postData); // returns: "{}"
var myStorage = window.localStorage; // returns: "[object FormData]"
myStorage.setItem("contentOrder", postData);

请帮忙，我应该如何在我的客户端保存这个对象？

【问题讨论】：

localStorage 只存储字符串。此外，您不能使用脚本填充 file 输入。您需要重新考虑这个流程......尤其是在处理较大的文件时，因为 localStorage 也有大小限制
我们有一个商店网站，我们可以为客户在登录前购买。我想保留用户输入，直到他登录然后提交。
可以上传并存储在会话或临时文件中，然后在登录后对其进行其他操作

标签： javascript html cookies local-storage client-side

【解决方案1】：

要从表单数据中获取文件，请使用formData.get('file')，其中file 是输入的名称。返回的对象将是 Blob 类型（see 如何获取其内容）。

完整的例子可以在这个小提琴中找到：https://jsfiddle.net/skm5m467/1/

【讨论】：