JavaScript で単純な単一ページの Web アプリケーションを作成しているとします。アプリケーションは、従業員の記録を表示するだけです。ユーザーが検索パラメーターを入力すると、アプリケーションは AJAX を使用してサーバーから従業員のレコードを取得し、それらを Web ページに表示します。
アプリケーションの状態はsearch paramsとemployeesです。それらをアプリケーションに保存する方法は？2 つのオプションが表示されます。
search paramsとemployees同期します。それは理にかなっていますか？これら2つのオプションの長所と短所は何ですか?
HTML 5を使用する場合は、この種のレバレッジの使用を検討してください。
間違いなく後者。DOMはデータ構造として設計されたことはありません。一方、DOMをカスタムデータ構造と同期させるためのアーキテクチャを作成するのは面倒な場合があります。
幸いなことに、これを支援するフレームワークがあります。これらのほとんどは、MVC（またはMV *）のようなデザインパターンに従います。例としては、Backbone.js、AngularJS、Spine、Agility.js、JavaScriptMVCなどがあります。周りを見て。
このプロジェクトもチェックしてください：TodoMVC。このようなフレームワークを使用するかどうか、使用する場合はどのフレームワークを使用するかを決定するのに役立つ場合があります。
最新のブラウザをターゲットにしている場合は、Webストレージを調べるとよいでしょう。
ここに書いてください：http ：//sixrevisions.com/html/introduction-web-storage/
そうすれば、すべての負荷がクライアント内に保持され、データはリクエスト間、およびユーザーがアプリケーションを離れてアプリケーションに戻った場合に保持されます。
私が推測しているあなたが言及したオプションは、隠されたDOM要素内にデータを保存することを意味しますが、開発は簡単ですが、すべての永続性が失われます。この道を進むつもりなら、データを直接javascriptオブジェクトに保存してみませんか？
それらを永続的にしたい場合は、DOMを使用することはできませんが、使用しないでください。HTMLは、ユーザーインターフェース用であり、アプリのデータストレージ用ではなく、すべてをリンクするためのものです。いくつかのオプションがあります。JavaScriptでグローバル変数を使用できますが、ページへのアクセス間でグローバル変数が保持されないことを覚えておく必要があります。これがあなたが望むものであるならば、先に進んでください。
もう1つのオプションは、HTML5のローカルストレージを使用することです。これは永続的で、データを保存するために設計されています。
最後のオプションは、データをローカルに保存したくないがデータを保持したい場合に重要ですが、データを取得および設定するクライアント側のサーブレットまたは何かでHTTPAJAXGETおよびPOSTをそれぞれ使用することです。 。
古い方法を使用したい場合は、Webストレージの代わりにCookieを使用することもできます。私は間違いなく後で提案します。
この場合、ユーザーがフィルターを適用すると、ハッシュの変更をトリガーできます。例: http://www.mydomain.com/index.html#name=abc&department=def。アプリはハッシュの変更をリッスンして、それに応じて更新します。crossroads.js、sammy.jsなどのライブラリを使用すると、それが可能になります。クライアント側でのこのアプローチは、サーバー側のルーティングの概念を取り入れています。
このアプローチを使用すると、URL を友人に送信して、アプリケーションの特定の状態に直接「ジャンプ」することができます。また、それを再利用してどこにでも保存することもできます。