2

Web アプリ (HTML、JS、CSS のみ) の検索機能に取り組んでいます。jQuery の .getjson() メソッドを使用してフィードからデータを取得し、それらの結果をページに表示しています。.each() ステートメント内で、結果に HTML マークアップを追加して、一部の要素を外部ソースにリンクさせています。

問題は、訪問者が Web アプリで検索を開始し、結果から外部ページへのリンクをクリックし、ブラウザの [戻る] ボタンを使用して結果ページに戻ると、すべての検索結果がクリアされ、別の検索を開始する必要があります。

検索結果を一時的に保存したいので、ユーザーが結果からリンクをクリックし、[戻る] ボタンを押してアプリに戻った場合、すべての結果が新しい検索なしで利用できるようになります。

これをさらに一歩進めると、過去の検索の結果も保持されるので、訪問者が [戻る] ボタンを押し続けると、以前のすべての検索を表示できます (もちろん、制限はあります)。

HTML5 sessionStorage はこれに最適なようですが、私が見つけた情報は、面倒なコーディング ソリューションを示しています。すべての json 結果を JS オブジェクトとして保存し、訪問者が [戻る] ボタンを押したときに各ステートメントによってそれらを再レンダリングすることはできませんか? 私は間違いなく、この問題に対してコード ライブラリまたはプラグインを使用することにオープンです。

4

4 に答える 4

0

この問題に対処するには 2 つの方法があります。1 つはサーバーに結果をキャッシュし、オンデマンドでビューにデータを入力する方法です。2 番目は、前述のように sessionStorage を使用する方法です。sessionStorage (IMO) には非常に単純な API があります。sessionStorage.setItem(key, value) または sessionStorage.getItem(key) を使用できます。sessionStorage.key(index)、sessionStorage.removeItem(key)、sessionStorage.clear() などの他のメソッドも使用できます。おそらく、sessionStorage にクロスブラウザー ポリフィル ソリューションを含めると便利です。Modernizr の「Web ストレージ」ポリフィル セクションを確認してください: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-ポリフィル-- 楽しんでください :-/

于 2012-08-19T19:25:29.667 に答える
0

私の頭の上から：

ユーザーが検索するたびに、URL のハッシュを一意の文字列に変更します (たとえば、'search-{userInput}' ... もちろん、'search-' を忘れることもできますが、私はきれいな URL が好きです)。これにより、戻るボタンがサポートされるはずです。それで：

代替案 A: hashChange イベントをリッスンし、window.location.hash を解析して、リクエストを検索 URL に再送信します。理論的には、タイムスタンプを URL に追加したり、そのようなクレイジーなことをしたりしない限り、ブラウザのキャッシュ メカニズムがここで作動するはずです。なければ追加依頼ということですが、それでいいのではないですか？

代替 B: 結果を localStorage にキャッシュすることで、既存の検索クエリ メカニズムを拡張します (事前に JSON.stringify を忘れずに、something-{timestamp} キーを使用してください)。次に、hashChange イベントをリッスンし、localStorage から結果を取得します。個人的には、localStorage を詰まらせているため、このソリューションはお勧めしません (一部のブラウザーでは 2.5mB に制限があることがわかります)。

おそらく、少なくとも hashChange イベント、JSON stringify/parse、および LocalStorage に対するブラウザー サポートの欠落を回避する方法を見つける必要があるでしょうが、私は今のところ十分なライブラリ/プラグインがあると楽観視しています。

于 2012-08-19T19:26:59.550 に答える
0

あなたは複雑すぎると考えています: あなたの検索フォームはおそらく URL を変更しません! POST の代わりに GET を使用すると、目的の結果が得られます。現在、ブラウザは、表示したいウェブサイトの状態を知る方法がなく、デフォルトで最初の空の検索フォームが表示されます

提案どおりにキャッシングを追加することもできますが、それは実際には問題ではありません

于 2012-08-20T07:09:32.057 に答える
0

http://brian.io/lawnchair/は、永続化のための API の優れた小さなライブラリです。さまざまなストレージ オプションの抽象化として同じ構文を使用できますhttp://brian.io/lawnchair/adapters/

于 2012-08-19T20:19:27.920 に答える