頁面刷新后如何保持按鈕處於活動狀態？

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類似於localStorage ； 不同的是， localStorage中的數據不會過期，而sessionStorage數據會在頁面會話結束時被清除。

• 在新選項卡或窗口中打開頁面會創建一個具有頂級瀏覽上下文值的新會話，這與會話 cookie 的工作方式不同。

更多關於sessionStorage在這里developer.mozilla.org/Window/sessionStorage

---

本地存儲：

只讀的localStorage屬性允許您訪問文檔來源的 Storage 對象； 存儲的數據跨瀏覽器會話保存。 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");