Bootstrap Dropdown with MVC - Keep last selected value displayed - asp.net

Question

I have the following Bootstrap dropdown in my Coverage MVC View. It defaults to "Active" status. When another status is selected, the associated items are shown on the page, for instance, "Past Coverage".
<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>Active</li>
<li>Past Coverage</li>
<li>Researching Now</li>
</ul>
</div>
I have the following javascript to change the html of the dropdown, so in this case it would say "Past Coverage".
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$("#statusButton").html(selText + '<span class="caret"></span>');
This works fine, but you can only see, in this case, "Past Coverage", for a second, because then the href link is fired, the MVC Url.Action is called, the page reloads and Active is once again shown in the dropdown. How do I keep the most recent selected status in the dropdown?

Answer 1

You can use localStorage for storing. If you want to store in a per page session basis, then you can use sessionStorage.
Something like this should do.. Don't forget to clear the localStorage by calling localStorage.clear(); when needed.
$(".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
}
});
I haven't really done something like this in particular so there must be a better way other than this. But this should work.