HTLM5文件直接輸入到瀏覽器緩存（沒有上傳/服務器）

我想允許用戶導入/導出他自己的首選項作爲一個小的（JSON）文件;驗證完成後，我將用文件中的值替換已存儲在LocalStorage中的值。HTLM5文件直接輸入到瀏覽器緩存（沒有上傳/服務器）

想象一下，很多HTML5 File Input功能的概念驗證演示使用圖像，並允許在實際上傳之前在瀏覽器中預覽它們！如果瀏覽器可以讀取和渲染圖像，它肯定可以讀取我的小30行Json文件，對吧？那是究竟是我想做什麼。

我並不需要一個web服務器，我希望文件留在客戶端的整個時間;我怎樣才能做到這一點？

2017-10-20 yPhil

所以，你要允許客戶端選擇一個文件（JSON）格式，加載/預覽它，並更新本地存儲的記錄？ – NewToJS

使用'FileReader（）''.readAsText（）'方法，然後使用'JSON.parse（）'字符串。 – dandavis

您可以閱讀使用的FileReader這樣的文件，

<input type='file' accept='text/plain' onchange='openFile(event)'> 

var openFile = function (event) { 
    var input = event.target; 
    var reader = new FileReader(); 
    reader.onload = function() { 
     var text = reader.result; 
     obj = JSON.parse(text); 
     obj_database = JSON.parse(localStorage.getItem("...")); 
     //change obj_database 
     localStorage.setItem("...", JSON.stringify(obj_database)); 
     //print success msg 
    }; 
    reader.readAsText(input.files[0]); 
};

來源

2017-10-20 01:34:27

HTLM5文件直接輸入到瀏覽器緩存（沒有上傳/服務器）

回答

相關問題