web-dev-qa-db-ja.com

JavaScriptはどのようにローカルファイルに保存できますか？

ファイル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>
javascriptjqueryjsonjsonp
12
Mirko Cianfarani

download属性はデータURIを好まないようであるため、download属性とwindow.URLメソッドを確認する必要があります。これ Googleの例 は、あなたがやろうとしていることのほとんどです。

13
Calvein

クライアントマシンにとって大きな脅威になる可能性があるため、ローカルクライアント（ブラウザマシン）を使用せずにファイルをローカルに保存することはできません。リンクを使用してそのファイルをダウンロードできます。 Jsonデータのようなものをローカルマシンに保存する場合、ブラウザが提供するLocalStorage、 Web Storage を使用できます

9
Adil

それはすべて、「ローカルに保存する」ことで達成しようとしていることに依存します。ユーザーにファイルのダウンロードを許可しますか？その後 <a download> が道です。アプリケーションの状態を復元できるように、ローカルに保存しますか？次に、 WebStorage のさまざまなオプションを調べます。具体的には localStorage または IndexedDB 。 FilesystemAPI を使用すると、任意のデータを保存できるローカル仮想ファイルシステムを作成できます。

3
rodneyrehm

Flashの大部分は軽deしていますが、html/javascript環境で「保存」および「名前を付けて保存」機能を提供するための実行可能なオプションです。

ここで利用可能なこの機能を提供する「OpenSave」というウィジェットを作成しました。

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

-マイク

2
bob

したがって、あなたのreal質問は、「JavaScriptはローカルファイルにどのように保存できますか？」です。

http://www.tiddlywiki.com/ をご覧ください

内部で「変更」した後、HTMLページをローカルに保存します。

[2016.01.31更新]

TiddlyWikiオリジナルバージョンは直接保存されました。それは非常に素晴らしく、タイムスタンプをバックアップファイル名の一部として構成可能なバックアップディレクトリに保存されました。

TiddlyWikiの現在のバージョンは、ファイルのダウンロードと同様にダウンロードします。独自のバックアップ管理を行う必要があります。 :(

[更新の終了

秘Theは、ローカルに保存できるように、http：//ではなくfile：//としてページを開く必要があることです。

ブラウザのセキュリティにより、ローカルシステムに保存することはできません。自分のローカルシステムに保存するだけで、それでも簡単ではありません。

-ジェシー

1
Jesse Chisholm

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/

1
Stanislav

FireFoxを使用している場合、File HandleAPIを使用できます

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

私はちょうどそれをテストし、機能しました！

0
Kbdavis07