jsファイルに関する情報をlocalStorageに保存する

Question

プラグインmechanizmを作成したいと思います。つまり、このプラグインが実行するように設定されている（実行中として切り替えられている）ときに、自分のWebサイトにjsファイルをロードし、js "プラグイン"（関数）を実行できます。

これはすべてサーバーなしでやりたいことです。

つまり、localstorage jsファイルまたはこのファイルへのパスを保持したいと思います。

jsが簡単にファイルパスにアクセスできないため、やりにくいようです。

は私が<input type="file"/>

でファイルを扱うと私はのonchangeイベントに反応します。 URL.createObjectURL(event.srcElement.files[0])

そして、私はのlocalStorageでそのURLを保存しようとしたが、このURLは一時的なものである：私は私がすることにより、そのオブジェクトのURLを作成することができるものとevent.srcElement.files[0]

でファイルを選択見つけることができるイベントを取得します。 また、イベント全体を保存するか、ファイル（event.srcElement.files[0]）だけを保存しようとしました。

しかし、私は機能.setItemにそれを置きたい場合、私はそれから文字列を作成する必要があります。

localStorage.setItem("functionURL", JSON.stringify(this.functionURL)); 

.toString()は[Object Event/File]

JSON.stringify()を作成し、{}ので

[Object Event/File]からを作成し、多分あります何らかのサーバーなしで関数として使用できるファイルを何とか思い出す方法がありますか？

Answer 1

だから、サーバーがなくても関数として使用できるファイルを何らかの形で覚えているのでしょうか？

基本的には、 :-) Webストレージは文字列だけを格納します。明らかなセキュリティ上の理由から、文字列を使用してWebページからユーザーのローカルファイルシステム上のファイルにアクセスすることはできません。

あなたは、代わりにできます。

1. は（その文章を読んで、それが可能な彼らがそれらをinput[type=file]にファイルを特定することによって、あなたのページ（サーバーなし）にファイルを「アップロード」するために作ります​​3210）を経由して、ローカルストレージを実行するためのコードを持っている場合
2. それを実行し、ページロードで
3. ローカルストレージにそのテキストを格納し、ユーザーに彼らがにアップロードしたコードを削除したり、更新するための方法を提供しますページ

これはすべてブラウザで発生するため、サーバーは必要ありません。

ウェブストレージにはサイズ制限がありますが、かなり寛大です（2.5〜5MB程度）。しかし、これらの限界に遭遇した場合は、service workerでこれらのファイルをキャッシュすることでそれをさらに引き上げることができますが、複雑さは著しく上がります。私はWebストレージから始めて、大規模なファイルを本当にサポートする必要がある場合に移動します。 （ユーザーがinput[type=file]を経由して特定するスクリプトファイルを読み込む）

＃1は、近代的なブラウザでは本当に簡単です：

var file = input.files[0]; 
var fr = new FileReader(); 
fr.onload = function() { 
    // Use `fr.result` here, it's a string containing the text 
}; 
fr.readAsText(file);