如何将Javascript变量保存为客户端PC上的文件

Question

我将在编辑中发布我的代码...我无法提交包含代码的问题。

我维护一个聊天程序，当我被分配给它时，它已经被创建了。我的工作刚开始只是为了使它与我们网站的其他部分相匹配。现在管理层正在寻求额外的功能，而这些功能已经超出我的头脑。一种这样的功能是客户将聊天记录的副本保存到他们的计算机的选项。

整个聊天对话存储在一个名为chatHistoryHTML的JavaScript变量中，并且循环通过向chatHistoryHTML变量添加新的文本行并在“历史记录”div中显示它，使页面上的聊天会话每5秒更新一次供客户看。

现在，我知道如何打开一个新窗口来显示只有聊天记录，并没有标识，背景或文本输入框。但是，我无法使用我的方法将PHP命令传递到新页面。

理想情况下，我想要一个解决方案，允许用户点击一个按钮，并出现一个保存对话框，只保存聊天对话，无需打开新窗口。我现在打开一个新窗口，因为我试图避免保存页面上的所有其他内容。

我愿意接受建议。我知道一些JavaScript和PHP，但知道AJAX没有

Answer 1

主要选项：

• 转储聊天记录到一个新的窗口，并调用print()（隔离日志，并使其打印，否则用户抢占了所有UI元素），或者
• 使用AJAX并将其发送给服务器，然后服务器将其中继到电子邮件回给用户。

JavaScript不能将文件本地保存到客户端。但是，您有第二选项：

• 将其迁移到Silverlight/Flash以具有附加功能/功能。

Answer 2

上的所有客户端，你可以尝试：

var content, MIME_TYPE, theBlob, a; 

// What will actually be put into the file 
content = "THE FILE CONTENT"; 

// The file type 
MIME_TYPE = "text/plain"; 
// Basically, the file itself 
theBlob = new Blob([content], {type: MIME_TYPE}); 

// The anchor element 
a = document.createElement("a"); 
// Set the name of the file that will be downloaded 
a.download = "Chat_History.txt"; 
// Set the contents to be downloaded 
a.href = window.URL.createObjectURL(theBlob); 
// Anchor's text 
a.textContent = "Download"; 

// What's displayed as the URL of the anchor (when hovered, copied, etc.) 
a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(":"); 

// Add the anchor to the page 
document.body.appendChild(a); 

DEMO：http://jsfiddle.net/oqskpydg/

这确实不在所有浏览器使用的功能，但它是一个坚实的选择。

---

参考文献：

• Blob构造 - https://developer.mozilla.org/en-US/docs/DOM/Blob
• Blob浏览器的兼容性 - http://caniuse.com/blobbuilder
• download属性/属性 - https://developer.mozilla.org/en-US/docs/HTML/Element/a#attr-download
• download属性/属性浏览器COMPA tibility - http://caniuse.com/download
• URL.createObjectURL - https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL
• dataset财产 - https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• dataset属性浏览器的兼容性 - http://caniuse.com/dataset

Answer 3

可以使用Data URI scheme，比伊恩的解决方案更广泛的支持，并且它不依赖在服务器端：

<a href="data:application/octet-stream;base64,PHVsPjxsaT50aGlzPGxpPmlzPGxpPmE8bGk+Y2hhdCBsb2c8L3VsPgo=">Download chat log</a> 

您可以使用window.btoa和window.atob进行base64处理。

Demo。显示框架源代码来查看源代码，而不是PasteHTML的封装。