2012-06-17 66 views
10

C'è già una soluzione per scrivere file JSON online ma voglio salvare localmente il file json. Ho provato a utilizzare questo esempio http://jsfiddle.net/RZBbY/10/ Crea un collegamento per scaricare il file, utilizzando questa chiamata a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show(); C'è un modo per salvare il file localmente invece di fornire un collegamento scaricabile? Esistono altri tipi di conversione oltre data:application/x-json;base64?Come si può salvare JavaScript su un file locale?

Ecco il mio codice:

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

risposta

7

Non è possibile salvare il file in locale senza coinvolgere il client locale (macchina browser) come ho potuto essere una grande minaccia per computer client. Puoi usare il link per scaricare quel file. Se si desidera memorizzare qualcosa come dati JSON sulla macchina locale è possibile utilizzare LocalStorage fornito dai browser, Web Storage

+7

Grazie, potrebbe fornire informazioni errate ma non lo sapevo prima e ero abituato a ricevere aiuto da esso. Potrebbe essere, per favore, dimmi cosa c'è di sbagliato nel particolare collegamento che ho dato nella risposta. – Adil

+1

Thx !!! Ora sto studiando l'archiviazione Web ma ci sono altri tipi di conversione oltre i dati: application/x-json; base64? –

+1

Uao ROdneyrehm Non sapevo di questo sito wfools.com –

1

Così, il vostro vera domanda è: "Come può salvare JavaScript in un file locale?"

Date un'occhiata a http://www.tiddlywiki.com/

Salvano sua pagina HTML in locale dopo aver "cambiato" internamente.

versione originale [UPDATE 2016/01/31]

TiddlyWiki salvati direttamente. È stato abbastanza carino e salvato in una directory di backup configurabile con timestamp come parte del nome file di backup.

La versione corrente di TiddlyWiki lo scarica come qualsiasi file scaricato. Devi fare la tua gestione del backup. :(

[FINE UPDATE

Il trucco è, è necessario aprire la pagina come file: // non come http: //. Per essere in grado di salvare in locale

La sicurezza sul il browser non ti consente di risparmiare al _someone_else's_ sistema locale, solo per il proprio, e anche allora non è banale.

-Jesse

+1

Ora sto studiando Tiddlywiki ma ci sono altri tipi di conversione oltre i dati: application/x-json; base64? –

+0

tiddlywiki usa un'applet java per accedere al filesystem locale, non javascript. –

+3

TiddlyWiki utilizza un'applet Java per Safari e Opera. Per IE utilizza ActiveX e per Firefox/Camino utilizza pure javascript (tramite privilegeManager) o un'estensione per Firefox (dal momento che privilegeManager è stato rimosso nella v15). – dwurf

3

tutto dipende da ciò che si sta cercando di raggiungere con "risparmio localmente ". Vuoi consentire all'utente di scaricare il file? quindi <a download> è la strada da percorrere. Vuoi salvarlo localmente, così puoi ripristinare lo stato dell'applicazione? Quindi potresti voler esaminare le varie opzioni di WebStorage. Specificamente localStorage o IndexedDB. Il FilesystemAPI consente di creare file virtuale system locali è possibile memorizzare dati arbitrari in.

+1

thx ma ci sono altri tipi di conversione oltre i dati: application/x-json; base64? –

+1

A parte il fatto che dovrebbe essere ['application/json'] (http://stackoverflow.com/a/477819/515124) - no, non vedo cos'altro avrebbe senso. – rodneyrehm

+1

Con IndexedDB come scaricare locale? –

11

si dovrebbe verificare l'attributo download e il metodo window.URL perché l'attributo download non sembra gradire i dati URI. Questo example by Google è praticamente quello che stai cercando di fare.

+0

+1 Ho provato lo schema uri di dati in passato, funziona, ma decide come nominare il file con cui si finisce, quindi è praticamente inutile. Ho provato questo in Firefox, Safari, Opera e Chrome su Mac, Safari e Opera non hanno "BlobBuilder" Quindi il disclaimer su "solo Chrome dev channel (14.0.835.15+) supporta questo attributo" è parzialmente vero. Al momento funziona su FireFox, fallisce in Safari e Opera. – Shanimal

+0

Blob Builder dovrebbe funzionare anche in MSIE ... http://ie.microsoft.com/testdrive/HTML5/BlobBuilder/ – Shanimal

2

Mentre la maggior parte disprezza Flash, è un'opzione valida per fornire funzionalità "salva" e "salva come" nel proprio ambiente html/javascript.

Ho creato un widget chiamato "OpenSave" che fornisce questa funzionalità disponibile qui:

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

-Mike

+0

è possibile salvare tutti i tag head e body utilizzando questo? –

Problemi correlati