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文件直接输入到浏览器缓存（没有上传/服务器）

回答

相关问题