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保存整个页面重新加载时按钮的状态。

sessionStorage：

sessionStorage属性访问当前源的会话存储对象。 sessionStorage与localStorage类似；区别在于localStorage中的数据不会过期，而sessionStorage中的数据会在页面会话结束时被清除。


在新标签页或窗口中打开页面会创建一个新会话，其顶级浏览上下文的值与会话Cookie的工作方式不同。< / li>

这里developer.mozilla.org/Window/sessionStorage

中的更多有关sessionStorage的信息

localStorage：

只读的localStorage属性允许您访问文档来源的存储对象； 在浏览器会话中保存的数据。 localStorage与sessionStorage类似，除了localStorage中存储的数据没有没有到期时间，而sessionStorage中存储的数据在页面出现时被清除会话结束-即页面关闭时。



应注意，存储在localStorage或sessionStorage中的数据特定于页面协议。



键和值是始终是字符串（请注意，与对象一样，整数键将自动转换为字符串）。

此处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");

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

1 个答案: