Question

已经有一个在线编写文件JSON的解决方案，但我想在本地保存json文件。我试过使用这个例子http://jsfiddle.net/RZBbY/10/ 它使用此调用创建一个下载文件的链接 a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show(); 有没有办法在本地保存文件而不是提供可下载的链接？除data:application/x-json;base64之外还有其他类型的转化？

这是我的代码：

<!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>

Answer 1

您应该检查download属性和window.URL方法，因为download属性似乎不喜欢数据URI。这example by Google几乎就是你要做的事情。

Answer 2

在不涉及本地客户端（浏览器计算机）的情况下无法在本地保存文件，因为我可能对客户端计算机构成极大的威胁。您可以使用链接下载该文件。如果您想在本地计算机上存储类似Json数据的内容，您可以使用浏览器提供的LocalStorage ，Web Storage

Answer 3

这完全取决于你想要通过“本地保存”来实现的目标。您是否要允许用户下载文件？然后<a download>是要走的路。是否要在本地保存它，以便恢复应用程序状态？然后，您可能想要查看WebStorage的各种选项。具体为localStorage或IndexedDB。 FilesystemAPI允许您创建可以存储任意数据的本地虚拟文件系统。

Answer 4

虽然大多数人都鄙视Flash，但在html / javascript环境中提供“保存”和“另存为”功能是一个可行的选择。

我创建了一个名为“OpenSave”的小部件，它提供了以下功能：

http://www.gieson.com/Library/projects/utilities/opensave/

-Mike

Answer 5

所以，你的真正的问题是：“JavaScript如何保存到本地文件？”

查看http://www.tiddlywiki.com/

在内部“更改”后，他们会在本地保存HTML页面。

[更新2016.01.31]

TiddlyWiki原版直接保存。它非常好，并保存到可配置的备份目录中，时间戳作为备份文件名的一部分。

TiddlyWiki当前版本只需将其下载为任何文件下载。您需要自己进行备份管理。：（

[END OF UPDATE

诀窍是，您必须以file：//而不是http：//打开页面才能在本地保存。

您浏览器的安全性不会让您保存到_someone_else的本地系统，只能保存到您自己的系统，即使这样也不容易。

-Jesse

Answer 6

如果您使用的是FireFox，则可以使用File HandleAPI

https://developer.mozilla.org/en-US/docs/Web/API/File_Handle_API

我刚试过它并且有效！

Answer 7

基于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();

修改了原始小提琴：http://jsfiddle.net/9av2mfjx/

JavaScript如何保存到本地文件？

7 个答案: