MVCでのブートストラップドロップダウン - 最後に選択した値を表示し続ける

Question

私のカバレッジMVCビューには、次のブートストラップがあります。デフォルトでは「アクティブ」の状態です。別のステータスが選択されると、関連する項目、たとえば「過去のカバレッジ」がページに表示されます。

  <div class="dropdown"> 
      <button id="statusButton" class="btn dropdown-toggle ddlDisplay" type="button" data-toggle="dropdown"> 
       Active 
       <span class="caret"></span> 
      </button> 
      <ul id="statusDropdown" class="dropdown-menu"> 
       <li><a href="@Url.Action("Coverage", "Coverage", new { status = "A" })">Active</a></li> 
       <li><a href="@Url.Action("Coverage", "Coverage", new { status = "P" })">Past Coverage</a></li> 
       <li><a href="@Url.Action("Coverage", "Coverage", new { status = "R" })">Researching Now</a></li> 
      </ul> 
     </div> 

私は、ドロップダウンリストのHTMLを変更するには、次のJavaScriptを持っているので、この場合は「過去のカバレッジを」と言うでしょう。

$(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    $("#statusButton").html(selText + '<span class="caret"></span>'); 

これはうまく動作しますが、あなたがだけにしてhrefのリンクが発射されているので、MVC Url.Actionが呼び出され、第二のために、「過去カバレッジ」、この場合には、見ることができ、ページをリロードし、アクティブがもう一度ドロップダウンに表示されます。最近選択されたステータスをドロップダウンリストに保存するにはどうすればよいですか？

Answer 1

保存にはlocalStorageを使用できます。 1ページのセッション単位で保存する場合は、sessionStorageを使用できます。

このようなことは..必要なときにlocalStorage.clear();を呼び出してlocalStorageをクリアすることを忘れないでください。

$(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    $("#statusButton").html(selText + '<span class="caret"></span>'); 
    localStorage['selText'] = selText; // store in storage 
|); 

$(document).ready(function() { 
    var selText = localStorage['selText'] || 'defaultValue'; 

    if(selText != 'defaultValue') { 
     $("#statusButton").html(selText + '<span class="caret"></span>'); // Load previously selected item 
    } 
}); 

私は本当にこのようなことをしていないので、これ以外の良い方法が必要です。しかし、これはうまくいくはずです。