2012-06-17 135 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

是否有可能使用它保存頭部和身體標記中的所有內容? –

相關問題