2012-06-17 23 views
10

Ya existe una solución para escribir el archivo JSON en línea, pero quiero guardar el archivo json localmente. He intentado utilizar este ejemplo http://jsfiddle.net/RZBbY/10/ Crea un enlace para descargar el archivo, usando esta llamada a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show(); ¿Hay alguna manera de guardar el archivo localmente en lugar de proporcionar un enlace descargable? Existen otros tipos de conversión más allá de data:application/x-json;base64?¿Cómo se puede guardar JavaScript en un archivo local?

Aquí está mi código:

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

Respuesta

7

No es posible guardar el archivo localmente sin la participación del cliente local (máquina navegador) que pude ser una gran amenaza para la máquina cliente. Puede usar un enlace para descargar ese archivo. Si desea almacenar algo así como datos JSON en la máquina local puede utilizar LocalStorage proporcionada por los navegadores, Web Storage

+7

Gracias, podría estar proporcionando información incorrecta, pero no sabía esto antes y solía tomar ayuda de ella. Podría ser por favor dime qué está mal en el enlace particular que he dado en la respuesta. – Adil

+1

Thx !!! Ahora estoy estudiando el almacenamiento web, pero hay otros tipos de conversión más allá de los datos: application/x-json; base64? –

+1

Uao ROdneyrehm No sabía de este sitio wfools.com –

1

lo tanto, su verdadera pregunta es: "¿Cómo puede JavaScript guardar en un archivo local?"

Tome un vistazo a http://www.tiddlywiki.com/

Ahorran su página HTML localmente después de haber "cambiado" de forma interna.

[ACTUALIZACIÓN 01/31/2016]

TiddlyWiki versión original salvados directamente. Fue bastante agradable y se guardó en un directorio de copia de seguridad configurable con la marca de tiempo como parte del nombre de archivo de la copia de seguridad.

La versión actual de TiddlyWiki simplemente la descarga como cualquier descarga de archivos. Necesita hacer su propia administración de respaldo. :(

[FIN DE ACTUALIZACIÓN

El truco es, usted tiene que abrir la página como file: // no como http:. // para poder ahorrar localmente

La seguridad en su explorador no le permitirá ahorrar a _someone_else's_ sistema local, sólo a su propia, e incluso entonces no es trivial.

-Jesse

+1

Ahora estoy estudiando Tiddlywiki pero hay otros tipos de conversión más allá de los datos: application/x-json; base64? –

+0

tiddlywiki usa un applet de java para acceder al sistema de archivos local, no javascript. –

+3

TiddlyWiki utiliza un applet de Java para Safari y Opera. Para IE utiliza ActiveX y para Firefox/Camino utiliza javascript puro (a través de privilegeManager) o una extensión de Firefox (ya que privilegeManager fue eliminado en v15). – dwurf

3

todo depende de lo que está tratando de lograr con "ahorro localmente. ¿Desea permitir que el usuario descargue el archivo? luego <a download> es el camino a seguir. ¿Desea guardarlo localmente para que pueda restaurar el estado de su aplicación? A continuación, es posible que desee examinar las diversas opciones de WebStorage. Específicamente localStorage o IndexedDB. El FilesystemAPI le permite crear sistemas de archivos virtuales locales que puede almacenar datos arbitrarios en.

+1

thx pero hay otros tipos de conversión más allá de los datos: application/x-json; base64? –

+1

Aparte del hecho de que debería ser ['application/json'] (http://stackoverflow.com/a/477819/515124) - no, no veo qué más tendría sentido. – rodneyrehm

+1

¿Con IndexedDB cómo local descargable? –

11

usted debe comprobar el atributo download y el método window.URL porque no parece el atributo download a como URI de datos. Este example by Google es más o menos lo que estás tratando de hacer.

+0

+1 He intentado el esquema de datos uri en el pasado, funciona, pero decide cómo nombrar el archivo con el que terminas así que es bastante inútil. Intenté esto en Firefox, Safari, Opera y Chrome en Mac, Safari y Opera no tienen "BlobBuilder" Por lo tanto, la advertencia sobre "solo el canal dev de Chrome (14.0.835.15+) admite este atributo" es parcialmente cierto. En este momento funciona en FireFox, falla en Safari y Opera. – Shanimal

+0

Blob Builder supuestamente también funciona en MSIE ... http://ie.microsoft.com/testdrive/HTML5/BlobBuilder/ – Shanimal

2

Aunque la mayoría desprecia Flash, es una opción viable para proporcionar funciones de "guardar" y "guardar como" en su entorno html/javascript.

He creado un widget llamado "OpenSave" que proporciona esta funcionalidad está disponible aquí:

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

-Mike

+0

¿es posible guardar todo en las etiquetas de cabeza y cuerpo usando esto? –

Cuestiones relacionadas