页面刷新后如何保持按钮处于活动状态？

Question

I have two buttons that show and hide inputs when one of them selected. If the form is submitted when the oneway button is selected, the form reloads with an active return button. How do i get the active label(button) to still be active after the page reload/refresh?

 $(document).ready(function() { $("label[name='oneway']").on("click", function() { $(".arrival").hide(); $(".from").removeClass('col-lg-3'); $(".from").addClass('col-lg-4'); $(".to").removeClass('col-lg-3'); $(".to").addClass('col-lg-4'); $(".departure").removeClass('col-lg-3'); $(".departure").addClass('col-lg-4'); $("label[name='return']").removeClass('active'); $(this).addClass('active'); $('#trip').val('0'); }); $("label[name='return']").on("click", function() { $(".arrival").show(); $(".from").removeClass('col-lg-4'); $(".from").addClass('col-lg-3'); $(".to").removeClass('col-lg-4'); $(".to").addClass('col-lg-3'); $(".departure").removeClass('col-lg-4'); $(".departure").addClass('col-lg-3'); $("label[name='oneway']").removeClass('active'); $(this).addClass('active'); $('#trip').val('1'); }); });

 <form method="post" action=""> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label for="oneway" class="btn btn-default " name="oneway">One way</label> <label for="return" class="btn btn-default active" name="return">Return</label> </div> <div class="form-row col-lg-12"> <div class="form-group col-lg-3 from"> <label for="From">From</label> <input type="text" class="form-control autocomplete" id="from" name="from" placeholder="Departure city" value=""> </div> <div class="form-group col-lg-3 to"> <label for="To">To</label> <input type="text" name="to" class="form-control autocomplete" id="to" placeholder="Arrival city" value=""> </div> <div class="form-group col-lg-3 departure"> <label for="DepartureDate">Departure Date</label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="date_added" type="text" name="dd" class="form-control" value=""> </div> </div> <div class="form-group col-lg-3 arrival"> <label for="ArrivalDate">Arrival Date</label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="date_modified" type="text" name="rd" class="form-control" value=""> </div> </div> <div class="form-row col-lg-12"> <button type="submit" name="confirm" class="btn btn-primary btn-lg " id="confirm">Confirm</button> </div> </div> </form>

Answer 1

You can save the state of the button throughout page reloads using sessionStorage or localStorage .

---

sessionStorage:

The sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends .

• Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.

More about sessionStorage here developer.mozilla.org/Window/sessionStorage

---

localStorage:

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions . localStorage is similar to sessionStorage , except that while data stored in localStorage has no expiration time , data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

• It should be noted that data stored in either localStorage or sessionStorage is specific to the protocol of the page .

• The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).

More on localStorage here: developer.mozilla.org/Window/localStorage

---

Here is the code example :

$("label[name='oneway']").on("click", function(){
    sessionStorage.setItem("btnActive", "oneway");
    ....
 });

$("label[name='return']").on("click", function(){
    sessionStorage.setItem("btnActive", "return");
});

let sessionState = sessionStorage.getItem("btnActive");

if( sessionState !== null ) {
    if( sessionState == "oneway" ) {
       ...
    } else {
       ...
    }
} else {
    ...
}

Or using localStorage :

// set
localStorage.setItem("btnActive", "oneway");
// get
localStorage.getItem("btnActive");