title: How do I save and restore a File object in local storage
body: <p>I have an HTML5/javscript app which uses </p>
  
  <pre><code>&lt;input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)"&gt;
  </code></pre>
  
  <p>to capture a camera image. Because my app wants to be runnable offline, how do I save the File (<a href="https://developer.mozilla.org/en-US/docs/Web/API/File" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/File</a>) object in local storage, such that it can be retrieved later for an ajax upload?</p>
  
  <p>I'm grabbing the file object from the  using ...</p>
  
  <pre><code>function gotPhoto(element) { 
       var file = element.files[0];
       //I want to save 'file' to local storage here :-(
  }
  </code></pre>
  
  <p>I can Stringify the object and save it, but when I restore it, it is no longer recognised as a File object, and thus can't be used to grab the file content.</p>
  
  <p>I have a feeling it can't be done, but am open to suggestions. </p>
  
  <p>FWIW My workaround is to read the file contents at store time and save the full contents to local storage. This works, but quickly consumes local storage since each file is a 1MB plus photograph.</p>