2012-06-17 3 views
10

Es gibt bereits eine Lösung, um Datei JSON online zu schreiben, aber ich möchte JSON-Datei lokal speichern. Ich habe versucht, dieses Beispiel zu verwenden http://jsfiddle.net/RZBbY/10/ Es erstellt einen Link zum Herunterladen der Datei, mit diesem Anruf Gibt es eine Möglichkeit, die Datei lokal statt einen Download-Link zu speichern? Gibt es andere Arten der Konvertierung über data:application/x-json;base64 hinaus?Wie kann JavaScript in einer lokalen Datei gespeichert werden?

Hier ist mein Code:

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

Antwort

7

Es ist nicht möglich, Datei lokal zu speichern, ohne den lokalen Client (Browser-Maschine) beteiligt, wie ich eine große Bedrohung für die Client-Maschine sein könnte. Sie können den Link verwenden, um diese Datei herunterzuladen. Wenn Sie so etwas wie Json Daten auf dem lokalen Rechner gespeichert werden sollen Sie verwenden können Localstorage zur Verfügung gestellt von den Browsern, Web Storage

+7

Danke, es könnte falsche Informationen liefern, aber ich wusste das vorher nicht und nahm Hilfe davon. Könnten Sie mir bitte sagen, was in dem bestimmten Link falsch ist, den ich in der Antwort gegeben habe. – Adil

+1

Thx !!! Jetzt studiere ich Webspeicher, aber es gibt andere Arten der Konvertierung über Daten hinaus: Anwendung/x-json; base64? –

+1

Uao ROdneyrehm Ich wusste nicht von dieser Seite wfools.com –

1

So, Ihre echte Frage ist: „Wie kann JavaScript in einer lokalen Datei speichern?“

Werfen Sie einen Blick auf http://www.tiddlywiki.com/

Sie ihre HTML-Seite lokal speichern, nachdem Sie „geändert“ intern haben.

[UPDATE 2016.01.31]

TiddlyWiki Originalversion direkt gespeichert. Es war ziemlich nett und in einem konfigurierbaren Backup-Verzeichnis mit dem Zeitstempel als Teil des Backup-Dateinamens gespeichert.

TiddlyWiki aktuelle Version lädt es einfach als Datei herunterladen. Sie müssen Ihre eigene Backup-Verwaltung durchführen. :(

[END OF UPDATE

Der Trick ist, haben Sie die Seite als Datei zu öffnen: // nicht als http:. // Lage sein, lokal zu speichern

Die Sicherheit auf Ihrem Browser lassen Sie nicht lokales System, nur auf eigene Faust _someone_else's_ speichern, und selbst dann ist es nicht trivial.

-Jesse

+1

Nun studiere ich Tiddlywiki, aber es gibt andere Arten der Konvertierung über Daten hinaus: Anwendung/x-json; base64? –

+0

tiddlywiki verwendet ein Java-Applet, um auf das lokale Dateisystem zuzugreifen, nicht auf Javascript. –

+3

TiddlyWiki verwendet ein Java-Applet für Safari und Opera. Für IE verwendet es ActiveX und für Firefox/Camino verwendet es reines javascript (über privilegemanager) oder eine Firefox-Erweiterung (da privilegemanager in v15 entfernt wurde). – dwurf

3

es hängt alles davon ab, was Sie erreichen wollen mit „Speicher lokal ". Möchten Sie dem Benutzer erlauben, die Datei herunterzuladen, dann <a download> ist der Weg zu gehen. Möchten Sie es lokal speichern, damit Sie Ihren Anwendungsstatus wiederherstellen können? Dann sollten Sie sich die verschiedenen Optionen von WebStorage ansehen. Speziell localStorage oder IndexedDB. Die FilesystemAPI ermöglicht es Ihnen, lokale virtuelle Dateisysteme erstellen Sie beliebige Daten in speichern kann.

+1

thx aber Es gibt andere Arten der Konvertierung über Daten hinaus: Anwendung/x-json; base64? –

+1

Abgesehen von der Tatsache, dass es ['application/json'] sein sollte (http://stackoverflow.com/a/477819/515124) - Nein, ich sehe nicht, was sonst noch Sinn machen würde. – rodneyrehm

+1

Mit IndexedDB wie zum Herunterladen lokal? –

11

Sie sollten das download Attribut überprüfen und die window.URL Methode, weil das download Attribut scheint nicht Daten URI zu mögen. Diese example by Google ist ziemlich genau das, was Sie versuchen zu tun.

+0

+1 Ich habe versucht, Daten uri-Schema in der Vergangenheit, es funktioniert, aber es entscheidet, wie die Datei, die Sie am Ende mit so nennen, so ist es ziemlich nutzlos. Ich habe dies in Firefox, Safari, Opera und Chrome auf Mac versucht, Safari und Opera haben keinen "BlobBuilder". Der Disclaimer über "nur Chrome dev channel (14.0.835.15+) unterstützt dieses Attribut" ist teilweise richtig. Zur Zeit funktioniert es auf FireFox, es schlägt in Safari und Opera fehl. – Shanimal

+0

Blob Builder funktioniert angeblich auch in MSIE ... http://ie.microsoft.com/testdrive/HTML5/BlobBuilder/ – Shanimal

2

Während die meisten Flash verachten, ist es eine praktikable Option zum Bereitstellen von "Speichern" und "Speichern unter" -Funktionalität in Ihrer HTML/Javascript-Umgebung.

Ich habe ein Widget namens "OpenSave" erstellt, die diese Funktionalität hier zur Verfügung stellt:

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

-Mike

+0

ist es möglich, alles in den Kopf-und Körper-Tags mit diesem zu speichern? –