Stockage local : guide pratique pour enregistrer et restaurer des objets fichier

Question

J'ai une application utilisant HTML5/JavaScript qui utilise

<input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)">

;

Pour capturer des images de la caméra. Puisque mon application souhaite s'exécuter hors ligne, comment puis-je enregistrer un objet Fichier (https://developer.mozilla.org/en-US/docs/Web/API/File) dans le stockage local afin qu'il puisse être utilisé ultérieurement. Récupérez-le lors du téléchargement via ajax ?

Je récupère l'objet fichier de...

fonction gotPhoto(element) {
     var fichier = élément.files[0];
     //Je souhaite enregistrer le 'fichier' sur le stockage local ici :-(
}
Je peux convertir l'objet en chaîne et l'enregistrer, mais lorsque je le restaure, il n'est plus reconnu comme un objet Fichier et ne peut donc pas être utilisé pour obtenir le contenu du fichier. 
J'ai le sentiment que c'est irréalisable, mais je suis ouvert aux suggestions. 
En passant, ma solution de contournement consistait à lire le contenu du fichier tout en le stockant et à enregistrer le contenu complet sur le stockage local. Cela fonctionne, mais consomme rapidement du stockage local puisque chaque fichier est une photo de plus de 1 Mo. 

Answer 1

Convertissez-le en base64 et enregistrez.

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;
}
// 获取文件对象

Answer 2

Vous ne pouvez pas sérialiser les objets API de fichiers.

Bien que cela ne résout pas le problème spécifique, mais... Bien que je ne l'aie pas utilisé, si vous consultez cet article, il semble qu'il existe des moyens (bien que pas encore pris en charge par la plupart des navigateurs) de stocker des données d'image hors ligne dans certains fichiers afin qu'elles puissent être restaurées lorsque l'utilisateur est en ligne. (sans utiliser localStorage)