javascript - 如何在页面刷新后保持按钮处于事件状态？

Question

我有两个按钮，当选择其中之一时，它们会显示和隐藏输入。如果在选择单向按钮时提交表单，则表单将使用事件返回按钮重新加载。如何让事件标签(按钮)在页面重新加载/刷新后仍然处于事件状态？

$(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

您可以使用 sessionStorage 或 localStorage 在整个页面重新加载过程中保存按钮的状态。

<小时/>

session 存储:

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.

有关 sessionStorage 的更多信息，请参见此处 developer.mozilla.org/Window/sessionStorage

<小时/>

本地存储:

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).

有关 localStorage 的更多信息:developer.mozilla.org/Window/localStorage

<小时/>

这是代码示例:

$("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 {
    ...
}

或使用localStorage:

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