如何在网页刷新后保持按钮的激活状态？

Question

如何在网页刷新后保持按钮的激活状态？

4

我有两个按钮，当其中一个被选中时，它们会显示和隐藏输入框。如果在选择单向按钮时提交表单，则表单将重新加载并显示一个活动的返回按钮。如何在页面重新加载/刷新后仍然保持活动标签（按钮）处于活动状态？

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

- Otun Musa Bashir

2

使用 localStorage - Jaromanda X

1

我找到的所有localStorage示例都是单个按钮切换，并且在这种情况下无法工作。 - Otun Musa Bashir

1

真的吗？每个localStorage示例都是针对单个按钮的 - 也许sessionStorage示例使用两个。 - Jaromanda X

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ivan86 · Accepted Answer

您可以使用sessionStorage或localStorage在页面重新加载时保存按钮状态。

sessionStorage:

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

在新标签页或窗口中打开页面将创建一个带有顶级浏览上下文值的新会话，这与会话cookie的工作方式不同。

更多关于sessionStorage的信息，请访问developer.mozilla.org/Window/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");