ローカル ストレージ: ファイル オブジェクトの保存と復元のハウツー ガイド

Question

を使用する HTML5/JavaScript を使用するアプリケーションがあります。

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

;

カメラ画像をキャプチャします。アプリをオフラインで実行したいので、後で使用できるようにファイル (https://developer.mozilla.org/en-US/docs/Web/API/File) オブジェクトをローカル ストレージに保存するにはどうすればよいですか? ajax経由でアップロードする場合?

ファイル オブジェクトを次から取得しています...

function gotPhoto(element) {
     var ファイル = 要素.ファイル[0];
     // ここで「ファイル」をローカル ストレージに保存したいと思います :-(
}

オブジェクトを文字列に変換して保存できますが、復元すると File オブジェクトとして認識されなくなるため、ファイルの内容を取得するために使用できなくなります。

これは実現不可能な気がしますが、提案はお待ちしています。

ちなみに、私の回避策は、保存中にファイルの内容を読み取り、完全な内容をローカル ストレージに保存することでした。これは機能しますが、各ファイルは 1MB 以上の写真であるため、ローカル ストレージをすぐに消費します。

Answer 1

これをbase64に変換して保存します。

リーリー

Answer 2

ファイル API オブジェクトをシリアル化することはできません。

これでは特定の問題は解決されませんが... 私はこれを使用したことがありませんが、この投稿を見ると、オフラインの画像データを何らかのファイルに保存して、いつでも使用できるようにする方法があるようです (ただし、ほとんどのブラウザではまだサポートされていません)。ユーザーがオンライン中に (localStorage を使用せずに) 復元します