1

ページ上に<div id="populated">、入力されたDIV、テキスト領域、入力テキスト、チェックボックスなど、動的に作成されたコンテンツを受け取る要素があります。さらに、。を含むいくつかの要素がありaddEventListenerます。

私の質問は、この「入力された」DIVを保存し、ユーザーがページに戻ったときにそれを再ロードする方法です。

私が試したこと、使用してlocalStorage：

  • DIV全体をシリアル化されたオブジェクトとして保存します（ここからヒントを入手してください）。問題：「キャッチされていないTypeError：選択を持てない入力要素でselectionDirectionにアクセスしています。」

  • DIV全体をとして保存しますinnerHTML。問題：1）バインドイベントが失われる2）textareas/inputsにすでに入力されているデータが失われる。

イベントを再バインドすることはできますが、DIV構造の解析と、.value各要素の保存/復元は複雑すぎるように見えました。

私は「純粋な」JavaScript（フレームワークなし）を使用しており、AJAXは使用していません。アイデア、キーワードはありますか？

4

2 に答える 2

1

Web 上でデータを永続化するには、基本的に次の 3 つの方法があります。

  1. サーバ側
  2. ローカルストレージ
  3. クッキー

現在、Cookie には保存できる量に有限の制限があります (また、IIRC の制限はブラウザーによって異なります)。そのため、DIV に適切な量のものが含まれている場合、Cookie はそれをカットしません。ローカルストレージは新しいブラウザーで機能します...それがまったく機能する場合(実際には、ストレージエラーを独自の別の SO 投稿として投稿する必要があります)。

何を保存するかについては、バインドされたイベントの保存を基本的にあきらめることができます...すべてをインライン属性に変換し（例：「onclick = '...」）、すべてのHTMLを保存したい場合を除きます.. . しかし、インライン イベントはすぐに悪夢になるので、それはひどい考えです。（1つまたは2つしかない場合、これはオプションかもしれません...しかし、私はそれを提案することにひるみます。）

代わりに一般的に行われているのは、データをデータのみを含む構造 (DOM やイベントなどなし) にシリアル化することです。それを（どのように選択しても）保存し、それを「ロード」したいときにデシリアライズし、必要なDOM要素を構築し、その時点で必要なイベントをフックします。JSON.stringify (新しいブラウザーに存在するか、古いものをサポートしたい場合は Crockford の JSON ライブラリーから入手可能) は、jQuery の serialize および serializeArray メソッドと同様に、このシリアル化を行うための 1 つのオプションです。または、独自のソリューションを展開することもできます。

要するに：

  1. 保存したいデータだけをシリアル化します (JSON.stringify、$.serialize、$.serializeArray、または独自の関数を使用)
  2. サーバー側 (一般的なアプローチ)、Cookie (スペースが限られている)、またはローカル ストレージ (新しいブラウザーのみで、エラーを解決する必要があります) から選択して保存します。
  3. ストレージから取得したら、デシリアライズし、DOM 要素を構築し、必要に応じてそれらの要素にイベントをバインドします。

それが役立つことを願っています。

于 2012-05-29T20:36:47.027 に答える
0

再設計が必要でしたが、なんとか問題を解決できました。

  1. DIV の構造は にinnerHTMLonとして保存さonpageonloadれlocalStorageます。
  2. DIV 内のフィールドの値は、シリアル化されて に格納されlocalStorageます。
  3. バインディング関数は独立しており、呼び出すことができるため、DIV 全体を解析します。

scripsonbeforeunloadでは、「内部 HTML」と値を保存するように DIV を通過します。読み込み中に、スクリプトは localStorage が空かどうかをチェックします。空でない場合は、DIV にデータを入力し、値を読み込み、イベントを再バインドします。

于 2012-05-30T10:23:43.403 に答える