JavaScript 如何保存到本地文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11071473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can JavaScript save to a local file?
提问by Mirko Cianfarani
There's already a solution for writing file JSON online but I want to save json file locally.
I've tried to use this example http://jsfiddle.net/RZBbY/10/It creates a link to download the file, using this call
a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show();Is there a way to save the file locally instead of providing a downloadable link?
There are other types of conversion beyond data:application/x-json;base64?
已经有在线写入文件 JSON 的解决方案，但我想在本地保存 json 文件。我试过使用这个例子http://jsfiddle.net/RZBbY/10/它创建一个链接来下载文件，使用这个调用
a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show();有没有办法在本地保存文件而不是提供可下载的链接？除此以外还有其他类型的转换data:application/x-json;base64吗？
Here's my code:
这是我的代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://jqueryui.com//jquery-1.7.2.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<meta charset="utf-8">
<style>a { font: 12px Arial; color: #ac9095; }</style>
<script type='text/javascript'>
$(document).ready(function() {
var f = $('form'), a = $('a'),
i = $('input'), t = $('textarea');
$('#salva').click(function() {
var o = {}, v = t.val();
a.hide();//nasconde il contenuto
i.each(function() {
o[this.name] = $(this).val(); });
if (v === '') {
t.val("[\n " + JSON.stringify(o) + " \n]")
}
else {
t.val(v.substr(0, v.length - 3));
t.val(t.val() + ",\n " + JSON.stringify(o) + " \n]")
}
});
});
$('#esporta').bind('click', function() {
a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show();
});
</script>
</head>
<body>
<form>
<label>Nome</label> <input type="text" name="nome"><br />
<label>Cognome</label> <input type="text" name="cognome">
<button type="button" id="salva">Salva</button>
</form>
<textarea rows="10" cols="60"></textarea><br />
<button type="button" id="esporta">Esporta dati</button>
<a href="" style="display: none">Scarica Dati</a>
</body>
</html>
回答by Calvein
You should check the downloadattribute and the window.URLmethod because the downloadattribute doesn't seem to like data URI.
This example by Googleis pretty much what you are trying to do.
您应该检查download属性和window.URL方法，因为该download属性似乎不喜欢数据 URI。谷歌的这个例子几乎就是你想要做的。
回答by Adil
It is not possible to save file locally without involving the local client (browser machine) as I could be a great threat to client machine. You can use link to download that file. If you want to store something like Json data on local machine you can use LocalStorage provided by the browsers, Web Storage
在不涉及本地客户端（浏览器机器）的情况下无法在本地保存文件，因为我可能对客户端机器构成巨大威胁。您可以使用链接下载该文件。如果你想在本地机器上存储类似 Json 数据的东西，你可以使用浏览器提供的 LocalStorage，Web Storage
回答by rodneyrehm
It all depends on what you are trying to achieve with "saving locally". Do you want to allow the user to download the file? then <a download>is the way to go. Do you want to save it locally, so you can restore your application state? Then you might want to look into the various options of WebStorage. Specifically localStorageor IndexedDB. The FilesystemAPIallows you to create local virtual file systems you can store arbitrary data in.
这完全取决于您通过“本地保存”尝试实现的目标。是否允许用户下载文件？然后<a download>是要走的路。您想将其保存在本地，以便恢复您的应用程序状态吗？然后您可能想要查看WebStorage的各种选项。特别是localStorage或IndexedDB。该FilesystemAPI允许您创建本地虚拟文件系统，你可以存储在任意的数据。
回答by Stanislav
Based on http://html5-demos.appspot.com/static/a.download.html:
基于http://html5-demos.appspot.com/static/a.download.html：
var fileContent = "My epic novel that I don't want to lose.";
var bb = new Blob([fileContent ], { type: 'text/plain' });
var a = document.createElement('a');
a.download = 'download.txt';
a.href = window.URL.createObjectURL(bb);
a.click();
Modified the original fiddle: http://jsfiddle.net/9av2mfjx/
修改原fiddle：http: //jsfiddle.net/9av2mfjx/
回答by bob
While most despise Flash, it is a viable option for providing "save" and "save as" functionality in your html/javascript environment.
虽然大多数人鄙视 Flash，但它是在您的 html/javascript 环境中提供“保存”和“另存为”功能的可行选项。
I've created a widget called "OpenSave" that provides this functionality available here:
我创建了一个名为“OpenSave”的小部件，可在此处提供此功能：
http://www.gieson.com/Library/projects/utilities/opensave/
http://www.gieson.com/Library/projects/utilities/opensave/
-mike
-麦克风
回答by Jesse Chisholm
So, your realquestion is: "How can JavaScript save to a local file?"
所以，您真正的问题是：“JavaScript 如何保存到本地文件？”
Take a look at http://www.tiddlywiki.com/
They save their HTML page locally after you have "changed" it internally.
在您内部“更改”它之后，他们将其 HTML 页面保存在本地。
[ UPDATE 2016.01.31 ]
[ 更新 2016.01.31 ]
TiddlyWiki original version saved directly. It was quite nice, and saved to a configurable backup directory with the timestamp as part of the backup filename.
TiddlyWiki 原版直接保存。它非常好，并保存到一个可配置的备份目录中，时间戳作为备份文件名的一部分。
TiddlyWiki current version just downloads it as any file download. You need to do your own backup management. :(
TiddlyWiki 当前版本只是将其下载为任何文件下载。您需要进行自己的备份管理。:(
[ END OF UPDATE
[更新结束
The trick is, you have to open the page as file:// not as http:// to be able to save locally.
诀窍是，您必须将页面打开为 file:// 而不是 http:// 才能在本地保存。
The security on your browser will not let you save to _someone_else's_ local system, only to your own, and even then it isn't trivial.
您浏览器的安全性不会让您保存到_someone_else's_ 本地系统，只能保存到您自己的系统，即使这样也不是微不足道的。
-Jesse
-杰西
回答by Kbdavis07
If you are using FireFox you can use the File HandleAPI
如果您使用的是 FireFox，则可以使用 File HandleAPI
https://developer.mozilla.org/en-US/docs/Web/API/File_Handle_API
https://developer.mozilla.org/en-US/docs/Web/API/File_Handle_API
I had just tested it out and it works!
我刚刚测试了它，它的工作原理！
