2012-06-17 28 views
10

Đã có giải pháp để viết tệp JSON trực tuyến nhưng tôi muốn lưu tệp json cục bộ. Tôi đã cố gắng sử dụng ví dụ này http://jsfiddle.net/RZBbY/10/ Nó tạo liên kết để tải xuống tệp, sử dụng cuộc gọi này a.attr('href', 'data:application/x-json;base64,' + btoa(t.val())).show(); Có cách nào để lưu tệp cục bộ thay vì cung cấp liên kết có thể tải xuống không? Có các loại chuyển đổi khác ngoài data:application/x-json;base64?JavaScript có thể lưu vào tệp cục bộ bằng cách nào?

Dưới đây là mã của tôi:

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

Trả lời

7

Không thể lưu tập tin địa phương mà không liên quan đến khách hàng địa phương (máy trình duyệt) như tôi có thể là một mối đe dọa lớn cho máy client. Bạn có thể sử dụng liên kết để tải xuống tệp đó. Nếu bạn muốn lưu trữ một cái gì đó giống như dữ liệu JSON trên máy tính địa phương bạn có thể sử dụng LocalStorage được cung cấp bởi các trình duyệt, Web Storage

+7

Cảm ơn, nó có thể cung cấp thông tin sai nhưng tôi không biết điều này trước đây và được sử dụng để nhận trợ giúp từ nó. Có thể xin vui lòng cho tôi biết những gì là sai trong liên kết cụ thể tôi đã đưa ra trong câu trả lời. – Adil

+1

Thx !!! Hiện tại tôi đang nghiên cứu bộ nhớ trên web nhưng có các loại chuyển đổi khác ngoài dữ liệu: application/x-json; base64? –

+1

Uao ROdneyrehm Tôi không biết trang này wfools.com –

1

Vì vậy, thực câu hỏi của bạn là: "Làm thế nào JavaScript có thể lưu vào một tập tin địa phương?"

Hãy xem http://www.tiddlywiki.com/

Họ lưu trang HTML của họ tại địa phương sau khi bạn đã "thay đổi" nó trong nội bộ.

[UPDATE 2016.01.31]

Phiên bản gốc TiddlyWiki được lưu trực tiếp. Nó khá đẹp, và được lưu vào một thư mục sao lưu có thể cấu hình được với dấu thời gian như là một phần của tên tệp sao lưu.

Phiên bản hiện tại của TiddlyWiki chỉ tải xuống dưới dạng bất kỳ tệp nào tải xuống. Bạn cần phải làm quản lý sao lưu của riêng bạn. :(

[END OF CẬP NHẬT

Bí quyết là, bạn phải mở trang dưới dạng file: // không như http:. // để có thể tiết kiệm tại địa phương

Việc bảo mật trên của bạn Trình duyệt sẽ không cho phép bạn lưu vào _someone_else's_ hệ thống địa phương, chỉ để riêng mình, và thậm chí sau đó nó không phải là tầm thường.

-Jesse

+1

Bây giờ tôi học Tiddlywiki nhưng Có nhiều loại chuyển đổi khác ngoài dữ liệu: application/x-json; base64? –

+0

tiddlywiki sử dụng một applet java để truy cập hệ thống tệp cục bộ, chứ không phải javascript. –

+3

TiddlyWiki sử dụng một applet Java cho Safari và Opera. Đối với IE, nó sử dụng ActiveX và cho Firefox/Camino nó sử dụng javascript thuần túy (thông qua privilegeManager) hoặc một phần mở rộng firefox (vì privilegeManager đã được gỡ bỏ trong v15). – dwurf

3

Tất cả phụ thuộc vào những gì bạn đang cố gắng để đạt được với "tiết kiệm "Bạn có muốn cho phép người dùng tải xuống tệp không? sau đó <a download> là con đường để đi. Bạn có muốn lưu nó cục bộ, để bạn có thể khôi phục trạng thái ứng dụng của mình không? Sau đó, bạn có thể muốn xem xét các tùy chọn khác nhau của WebStorage. Cụ thể là localStorage hoặc IndexedDB. Các FilesystemAPI cho phép bạn tạo các hệ thống tập tin ảo địa phương mà bạn có thể lưu trữ dữ liệu tùy ý trong.

+1

thx nhưng Có các loại chuyển đổi khác ngoài dữ liệu: application/x-json; base64? –

+1

Bên cạnh thực tế là nó nên là ['application/json'] (http://stackoverflow.com/a/477819/515124) - không, tôi không thấy những gì khác sẽ có ý nghĩa. – rodneyrehm

+1

Với IndexedDB cách tải xuống cục bộ? –

11

Bạn nên kiểm tra download thuộc tính và các phương pháp window.URL vì thuộc tính download dường như không muốn dữ liệu URI. example by Google này là khá nhiều những gì bạn đang cố gắng làm.

+0

+1 Tôi đã thử lược đồ uri dữ liệu trong quá khứ, nó hoạt động, nhưng nó quyết định cách đặt tên cho tệp mà bạn kết thúc vì vậy nó khá vô dụng. Tôi đã thử điều này trong Firefox, Safari, Opera và Chrome trên Mac, Safari và Opera không có "BlobBuilder" Vì vậy, từ chối trách nhiệm về "chỉ Chrome dev kênh (14.0.835.15+) hỗ trợ thuộc tính này" là một phần đúng sự thật. Tại thời điểm này nó hoạt động trên FireFox, nó không thành công trong Safari và Opera. – Shanimal

+0

Blob Builder được cho là đang hoạt động trong MSIE ... http://ie.microsoft.com/testdrive/HTML5/BlobBuilder/ – Shanimal

2

Trong khi hầu hết các Flash coi thường, đó là tùy chọn khả thi để cung cấp chức năng "lưu" và "lưu dưới dạng" trong môi trường html/javascript của bạn.

tôi đã tạo ra một widget có tên là "OpenSave" cung cấp chức năng này có sẵn ở đây:

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

-mike

+0

là nó có thể lưu mọi thứ vào thẻ head và body bằng cách sử dụng nó không? –

Các vấn đề liên quan