There's already a solution for writing file JSON online but I want to save json file locally. I've tried to use this example http://jsfiddle.net/RZBbY/10/ It creates a link to download the file, using this call a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show();
Is there a way to save the file locally instead of providing a downloadable link? There are other types of conversion beyond data:application/x-json;base64
?
Here's my 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>
JavaScript cannot typically access local files in new browsers, but the XMLHttpRequest object can be used to read files. So it is actually Ajax (and not Javascript) which is reading the file.
JavaScript does not have direct access to the local files due to security and privacy. We can offer the user the possibility to select files via a file input element that we can then process. The file input has a files property with the selected file(s).
JavaScript files are stored on the server and sent to the browser. Only the browser does something with the code.
Based on 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();
Modified the original fiddle: http://jsfiddle.net/9av2mfjx/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With