<p>Ich habe eine Anwendung mit HTML5/JavaScript, die </p> <pre class="brush:php;toolbar:false;"><input type="file" take="image/*;capture=camera" onchange="gotPhoto(this)"></pre> ; <p>Zum Aufnehmen von Kamerabildern. Da meine Anwendung offline ausgeführt werden möchte, wie speichere ich ein Dateiobjekt (https://developer.mozilla.org/en-US/docs/Web/API/File) im lokalen Speicher, damit es später wieder abgerufen werden kann? beim Hochladen über Ajax? </p> <p>Ich erhalte das Dateiobjekt von...</p> <pre class="brush:php;toolbar:false;">function gotPhoto(element) { var file = element.files[0]; //Ich möchte 'Datei' hier im lokalen Speicher speichern :-( }</pre> <p>Ich kann das Objekt in eine Zeichenfolge konvertieren und speichern, aber wenn ich es wiederherstelle, wird es nicht mehr als Dateiobjekt erkannt und kann daher nicht zum Abrufen des Dateiinhalts verwendet werden. </p> <p>Ich habe das Gefühl, dass dies unerreichbar ist, aber ich bin offen für Vorschläge. </p> <p>Mein Workaround bestand übrigens darin, den Dateiinhalt beim Speichern zu lesen und den gesamten Inhalt im lokalen Speicher zu speichern. Dies funktioniert, verbraucht jedoch schnell lokalen Speicher, da es sich bei jeder Datei um ein Foto mit mehr als 1 MB handelt. </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;
}
// 获取文件对象