<p>我有一个使用HTML5 / JavaScript的应用程序，它使用</p> <pre class="brush:php;toolbar:false;"><input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)"></pre> <p>来捕获相机图像。因为我的应用程序希望能离线运行，所以我要如何将File（https://developer.mozilla.org/en-US/docs/Web/API/File）对象保存在本地存储中，以便稍后可以通过ajax上传时检索出来？</p> <p>我正在从 中获取文件对象...</p> <pre class="brush:php;toolbar:false;">function gotPhoto(element) { var file = element.files[0]; //我想在这里将'file'保存到本地存储 :-( }</pre> <p>我可以将对象转换为字符串并保存，但是当我恢复它时，它不再被识别为File对象，因此无法用于获取文件内容。</p> <p>我有一种感觉这是无法实现的，但我愿意听取建议。</p> <p>顺便说一下，我的解决方法是在存储时读取文件内容并将完整内容保存到本地存储中。这样做可以工作，但会快速消耗本地存储空间，因为每个文件都是1MB以上的照片。</p>

function gotPhoto(element) {
   var file = element.files[0];
   var reader = new FileReader()
   reader.onload = function(base64) {
      localStorage["file"] = base64;
   }
   reader.readAsDataURL(file);
}
// 保存到本地存储

function getPhoto() {
   var base64 = localStorage["file"];
   var base64Parts = base64.split(",");
   var fileFormat = base64Parts[0].split(";")[1];
   var fileContent = base64Parts[1];
   var file = new File([fileContent], "文件名", {type: fileFormat});
   return file;
}
// 获取文件对象