ハッシュプロパティは、URLのアンカー部分（＃番号から始まる部品）である読みやすく筆記可能な文字列です。
文法
location.hash
私たちのプロジェクトには、Ajax Query Form + Resultリストを備えた多数のページがあります。クエリの結果はAjaxによって返されるため、ユーザーがリスト内のアイテムをクリックして詳細ページを入力すると、ブラウザバックボタンをクリックしてAjaxクエリページに戻ります。この時点で、誰もがクエリページのフォームと結果がデフォルトの状態に戻っていることを知っています。
ページに戻るたびにクエリ基準に再入力する必要がある場合、またはリストのページにアクセスする必要がある場合、ユーザーはこのエクスペリエンスに夢中になります。
私たちのプロジェクトでは、非常にシンプルなJavaScriptベースクラスを書き、場所を処理してページステータスを保存しました。今日はそれをあなたと共有します。
（この記事の内容は、JavaScriptの初心者にとっては少し難しい場合があります。これは、クラスの定義、継承、仮想方法、反射などのJSオブジェクト指向の知識を含むためです。）
最初に私たちのニーズを見てみましょう
私たちのプロジェクトは、WeChatベースのH5タスク管理システムです。完了するページのプロトタイプは、以下の図に示されています。
要件は非常に明確である必要があります。つまり、クエリフォームをクリックし、AJAXを使用してクエリ結果を返し、リストのタスクをクリックしてタスクの詳細ページを入力します。管理者（プロジェクトマネージャー）は通常、複数のタスクを一度に処理するため、タスクの詳細ページとクエリリストページを常に切り替えます。この時点で戻りキーを押すと、クエリページのステータスを保存できない場合、クエリページに戻るたびにクエリ条件に再入力する必要があります。この経験は間違いなく耐えられません。
したがって、ユーザーがフォールバックキーを押すと、クエリ条件と結果がまだそこにあるように、ページステータスを保存する方法を見つける必要があります。
解決
ページステータスを保存するには多くのアイデアがありますが、location.hashを使用することが最良の方法であると思います。
アイデアは次のとおりです。
1.ユーザーがクエリ条件を入力して[OK]をクリックしたら、クエリ条件を文字列にシリアル化し、「＃」を介してクエリ条件をURLに追加して新しいURLを取得し、[location.replace（new URL）を呼び出してブラウザーアドレスバーのアドレスを変更します。
2.ユーザーがフォールバックキーを押してクエリページに戻ると、ページがロードされている場合、location.hashialize. Query条件にハッシュし、クエリ条件をクエリフォームに更新してクエリを実行すると言うこともできます。
アイデアはとてもシンプルです。重要なポイントは、location.replaceメソッドです。この方法は、ブラウザ内のアドレスバーのURLを変更するだけでなく、さらに重要なことに、Window.historyの現在のページのレコードを置き換えることです。 location.replaceメソッドが使用されていない場合、各フォールバックは前のクエリ条件に戻ります。もちろん、そのような要件は、特定のプロジェクトにも役立つ場合があります。
最終的な解決策
この記事が上記のソリューションのアイデアのみを共有している場合、それはほとんど価値がありません。この記事の価値は、私たちが書いたシンプルだが非常に強力なJavaScriptクラスでなければなりません。
上記のソリューションを理解している場合は、この簡単なJavaScriptクラスをご覧ください。
（function（）{if（window.hashquery）{return;} window.hashquery = function（）{}; hashquery.prototype = {parsefromlocation：function（）{if（location.hash == '' || location.hash.length ===）{return;} var propations = location = location = location.hash.substr （これのvar p）{if（！this.hasownproperty（p）|| typeof this [p]！= 'string'）{continue;} if（index <properties.length）{this [p] = properties [index]; if（this [p] === ' - '）{this [p] = '';}} index ++;}++ []; for（this in this）{if（！this.hasownproperty（p）|| typeof this [p]！= 'string'）{continue;} var value = this [p]; properties.push（value === ''？ ' - '：var url = location.origin + location + location + " +" + properties.join（ '|'）; location.replace（url）;}};}）（）（）;このクラスには2つの方法しかありません。 hashquery.parsefromlocation（）メソッドは、location.hash.hash hashquery subclassのインスタンスに脱色します。 Hashquery.updatelocation（）メソッドは、現在のハッシュクリーサブクラスのインスタンスをwindow.locationにシリアル化および更新します。
ハッシュクリークラスにはプロパティがないことがわかります。これは、基本クラスのみを定義し、クラスのプロパティがサブクラスで定義されているためです。クエリ条件は特定のページでのみわかるため、これも現実的です。
また、ここでは、シリアル化と脱臨に注意してください。ここでのシリアル化は、JavaScript反射メカニズムを使用して、インスタンスのすべての文字列属性の値を「|」で分離することです。シリアル化は、文字列を「|」で分離し、インスタンスのプロパティを反射（順序で）で更新することです。
Hashqueryクラスの使用方法
使いやすいです。
最初のステップは、サブクラスを定義し、コードなどの文字列属性に使用するために必要なすべてのクエリ条件を追加することです。
（function（）{window.tasksearchhashquery = function（）{hashquery.constructor.call（this）; this.iterationid = ''; this.assigneduserid = ''; this.status = ''; this.keyword = '';}; taksearchhashquery.consteartor = tasksearchhashquery; taskeskhashquery; taskedearchhashquery; taskedearchhashquery; taskedearchhashquery; hashquery（）;}）（）;2番目のステップで、hashquery.parsefromlocation（）およびhashquery.updatelocation（）メソッドをクエリページに呼び出します。次のコードは、完全なクエリページです。
（function（）{var urls = {list： "/app/task/list"}; var hashquery = null; var pager = null; $（document）。 ObjectDateFormByHashQuery（）; $（ "＃btnsearch"） location.hash $（ "＃lblcount"）。html（ "loading ..."）; pager.reload（）; page.hidesearch（）;}）; pager = new listpager（ "＃listtasks"、urls.list）; pager.getpostdata = function（index＆ " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + " +" + page.projectid + "＆iterationid =" + hashquery.iterationid + "＆assigneduserid =" + hashquery.Assigneduserid + "＆statuers =" + hashquery.status + "＆keyword =" + hashquery.keyword;}; pager.oneded = function（）{$（ "＃lblcount"）{"＃lblcount"） $（ "＃hfpagertototalcount"）。val（） + "tasks"）; $（ "＃hfpagertotalcount"）。remove（）;}; pager.init（）;}）; function updatehashquerybyform（）{）{hashquery.iterationid = $（ "＃dliterations"） $（ "＃ddlusers"）。val（）; hashquery.status = $（ "＃ddlstatuses"）。val（）; hashquery.keyword = $（ "＃txtkeyword"）。 {$（ "＃ddliterations"）。val（hashquery.iterationid）; $（ "＃ddlusers"）。val（hashquery.assigneduserid）; $（ "＃ddlstatuses"）。要約します
これは、plocial.hash.hashを使用してページステータスを保存することについて知っているすべてです。あなたのWebプロジェクトでそのようなニーズにどのように対処するのだろうか？
上記のコンテンツは、編集者が紹介した場所のページステータスを保存するためのヒントです。私はそれが誰にでも役立つことを願っています！