2012-06-17 175 views
10

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

这里是我的代码:

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

回答

7

这是不可能保存到本地文件,而不涉及本地客户端(浏览器的机器),因为我可能是客户端机器了极大的威胁。您可以使用链接下载该文件。如果你想存储的东西像本地机器您可以使用浏览器提供localStorage的JSON的数据,Web Storage

+7

谢谢,它可能会提供错误的信息,但我以前不知道,并习惯于从中获得帮助。可以请告诉我在答案中给出的特定链接有什么问题。 – Adil

+1

Thx !!! 现在我正在学习Web存储,但还有其他类型的数据转换:application/x-json; base64? –

+1

Uao ROdneyrehm我不知道这个网站wfools.com –

1

所以,你真正的问题是:“JavaScript的怎么能保存到本地文件?”

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

他们在本地保存后,你已经“改变”它在内部的HTML页面。

[UPDATE 2016年1月31日]

的TW原始版本直接保存。这是相当不错的,并保存到一个可配置的备份目录与时间戳作为备份文件的一部分。

TiddlyWiki当前版本只是下载它作为任何文件下载。你需要做你自己的备份管理。 :(

[结束时更新的

关键是,你要打开的页面文件://不为http://要能够在本地保存

安全上的浏览器将不会让您保存到本地_someone_else's_制度,只有你自己的,而且当时是不平凡的。

-Jesse

+1

现在我正在学习Tiddlywiki,但还有其他类型的数据转换:application/x-json; base64? –

+0

tiddlywiki使用java applet来访问本地文件系统,而不是javascript。 –

+3

TiddlyWiki为Safari和Opera使用Java applet。对于IE浏览器,它使用ActiveX和Firefox/Camino,它使用纯javascript(通过privilegeManager)或Firefox扩展(因为privilegeManager已在v15中删除)。 – dwurf

3

这一切都取决于你试图实现与“拯救什么本地“,你想允许用户下载文件,然后<a download>是要走的路。你想在本地保存它,所以你可以恢复你的应用程序状态?那么你可能想看看WebStorage的各种选项。具体为localStorageIndexedDB。该FilesystemAPI允许您创建本地虚拟文件系统,你可以存储任意数据。

+1

thx但是还有其他类型的数据转换:application/x-json; base64? –

+1

除了它应该是['application/json'](http://stackoverflow.com/a/477819/515124) - 不,我不明白还有什么是合理的。 – rodneyrehm

+1

有了IndexedDB如何下载本地? –

11

您应该检查download属性和window.URL方法,因为download属性似乎并不像数据URI。 这个example by Google几乎是你想要做的。

+0

+1我已经尝试过数据uri模式,它的工作原理,但它决定如何命名最终的文件,所以它几乎没用。我在Mac上使用Firefox,Safari,Opera和Chrome,Safari和Opera没有“BlobBuilder”,所以关于“只有Chrome开发者通道(14.0.835.15+)支持此属性”的声明部分属实。目前它适用于FireFox,它在Safari和Opera中失败。 – Shanimal

+0

Blob Builder据说也在MSIE工作...... http://ie.microsoft.com/testdrive/HTML5/BlobBuilder/ – Shanimal

2

尽管最鄙视Flash,但它是在您的html/javascript环境中提供“保存”和“另存为”功能的可行选项。

我已经创建了一个名为 “OpenSave” 的小工具,在这里提供此功能可供选择:

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

-Mike

+0

是否有可能使用它保存头部和身体标记中的所有内容? –

相关问题