22

ファイル 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>
4

8 に答える 8

13

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

于 2012-06-17T13:24:28.223 に答える
9

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

于 2012-06-17T13:07:01.570 に答える
3

それはすべて、「ローカルに保存」して何を達成しようとしているかによって異なります。ユーザーがファイルをダウンロードできるようにしますか? それ<a download>から行く方法です。アプリケーションの状態を復元できるように、ローカルに保存しますか? 次に、 WebStorageのさまざまなオプションを調べることができます。特にlocalStorageまたはIndexedDB。FilesystemAPIを使用すると、任意のデータを保存できるローカル仮想ファイル システムを作成できます。

于 2012-06-17T13:15:38.943 に答える
2

ですから、あなたの本当の質問は、「JavaScript でローカル ファイルに保存するにはどうすればよいですか?」ということです。

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

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

[ 2016.01.31 更新 ]

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

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

[ 更新終了

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

お使いのブラウザのセキュリティでは、_someone_else_ の_ローカル システムに保存することはできず、自分のローカル システムにのみ保存できます。その場合でも簡単ではありません。

-ジェシー

于 2012-06-17T13:10:36.540 に答える
1

Javascript でファイルを作成して保存するには、次の方法があります。

FileSaverというライブラリを使う

saveAs(new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"}));

BLOB オブジェクトを作成し、「名前を付けて保存」を提供します。

var a = document.createElement("a");
a.href = window.URL.createObjectURL(new Blob(["CONTENT"], {type: "text/plain"}));
a.download = "demo.txt";
a.click();

データをアップロードし、サーバーに保存します。

var data = new FormData();
data.append("upfile", new Blob(["CONTENT"], {type: "text/plain"}));
fetch("SERVER.SCRIPT", { method: "POST", body: data });

書き込み可能なファイル ストリームを作成します。

const fileHandle = await window.showSaveFilePicker();
const fileStream = await fileHandle.createWritable();
await fileStream.write(new Blob(["CONTENT"], {type: "text/plain"}));
await fileStream.close();

NodeJS では、単純にファイル システム モジュールを使用します。

 require("fs").writeFile("demo.txt", "Foo bar!");

<!-- (A) LOAD FILE SAVER -->
<!-- https://cdnjs.com/libraries/FileSaver.js -->
<!-- https://github.com/eligrey/FileSaver.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
 
<script>
// (B) "SAVE AS"
var myFile = new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"});
saveAs(myFile);
</script>

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

    <script>
    function blobajax () {
      // (A) CREATE BLOB OBJECT
      var myBlob = new Blob(["CONTENT"], {type: "text/plain"});
    
      // (B) FORM DATA
      var data = new FormData();
      data.append("upfile", myBlob);
    
      // (C) AJAX UPLOAD TO SERVER
      fetch("3b-upload.php", {
        method: "POST",
        body: data
      })
      .then((res) => { return res.text(); })
      .then((txt) => { console.log(txt); });
    }
    </script>
    <input type="button" value="Go" onclick="blobajax()"/>

    <script>
    async function saveFile() {
      // (A) CREATE BLOB OBJECT
      var myBlob = new Blob(["CONTENT"], {type: "text/plain"});
     
      // (B) FILE HANDLER & FILE STREAM
      const fileHandle = await window.showSaveFilePicker({
        types: [{
          description: "Text file",
          accept: {"text/plain": [".txt"]}
        }]
      });
      const fileStream = await fileHandle.createWritable();
     
      // (C) WRITE FILE
      await fileStream.write(myBlob);
      await fileStream.close();
    }
    </script>
    
    <input type="button" value="Save File" onclick="saveFile()"/>

// (A) LOAD FILE SYSTEM MODULE
// https://nodejs.org/api/fs.html
const fs = require("fs");

// (B) WRITE TO FILE
fs.writeFile("demo.txt", "CONTENT", "utf8", (error, data) => {
  console.log("Write complete");
  console.log(error);
  console.log(data);
});

/* (C) READ FROM FILE
fs.readFile("demo.txt", "utf8", (error, data) => {
  console.log("Read complete");
  console.log(error);
  console.log(data);
});
*/
于 2021-12-09T13:15:15.330 に答える
0

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

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

私はちょうどそれをテストしたところ、それは動作します!

于 2014-11-18T00:46:43.893 に答える