重新載入頁面時，Javascript更改重置

Question

我的網站有一頁結帳，所以我決定將其分為5部分，並使用javascript一次顯示一兩個。

參見下面的代碼：

    <fieldset id="vm-fieldset-pricelist" class="vm-fieldset-pricelist"> ... </fieldset>

    <div id="coupon-section" class="coupon-section display-none"> ... </div>

    <fieldset id="shipment-section" class="shipment-section display-none"> ... </fieldset>

    <div id="edit-account-section" class="billto-shipto display-none"> ... </div>

    <div id="part-five" class="display-none"> ... </div>


    <?php
                    $user = JFactory::getUser();
                    if ($user->guest) { 
                        $usercheckin = '_notloggedin';
                    } else {
                        $usercheckin = '_loggedin';
                    } 
            ?> 

   <button type="button" id="one-to-two<?php echo $usercheckin ?>" class="sabz-button pull-right" onclick="cartButtonHandler(this.id); return false;"><?php echo vmText::_('COM_VIRTUEMART_CHECKOUT_TITLE')?> </button>

<script>

window.cartButtonHandler = function(button_id) {
    switch(button_id) {
    case 'one-to-two_notloggedin':
        document.getElementById("vm-fieldset-pricelist").className = "display-none";
        document.getElementById("com-form-login").className = "";
        document.getElementById(button_id).innerHTML = "ثبت اطلاعات و ادامه خرید";
        document.getElementById(button_id).className = "abi-button pull-right";
        document.getElementById(button_id).id = 'two-to-three';
        break;
    case 'one-to-two_loggedin':
        document.getElementById("vm-fieldset-pricelist").className = "display-none";
        document.getElementById("edit-account-section").className = "billto-shipto display-none";
        document.getElementById("shipment-section").className = "shipment-section";
        document.getElementById(button_id).innerHTML = "ثبت اطلاعات و ادامه خرید";
        document.getElementById(button_id).className = "abi-button pull-right";
        document.getElementById(button_id).id = 'two-to-three';
        break;
    case 'two-to-three':
        document.getElementById("edit-account-section").className = "display-none";
        document.getElementById("shipment-section").className = "display-none";
        document.getElementById("coupon-section").className = "coupon-section";
        document.getElementById(button_id).innerHTML = "بازبینی و تایید سفارش";
        document.getElementById(button_id).id = 'three-to-four';
        break;
   case 'three-to-four':
        document.getElementById("part-chahar").className = "";
        document.getElementById("vm-fieldset-pricelist").className = "vm-fieldset-pricelist";
        document.getElementById("edit-account-section").className = "billto-shipto display-none";
        document.getElementById("shipment-section").className = "shipment-section";
        document.getElementById("coupon-section").className = "coupon-section";
        document.getElementById("handlerbutton-section").className = "display-none";
        document.getElementById(button_id).id = 'four-to-five';
        break;
   case 'four-to-five':
        alert(button_id);
        break;
}
}

    </script>

首先，我不了解javascript，是否有更好的方法在javascript或jquery或...中做到這一點？

我的問題：例如，“優惠券部分”中的用戶輸入優惠券代碼並單擊“提交”按鈕時，請注意，優惠券提交按鈕與“下一步”按鈕不同，頁面會重新加載，並彈出第一步。 或當用戶選中復選框或任何其他交互時，頁面會重新加載，並彈出第一步。

我如何保存javascript更改並使它們重新加載到頁面上，以便用戶與表單進行交互后可以停留在同一步驟上？ 我想可以使用Cookie或其他方法解決此問題，但我不知道該怎么做。

Answer 1

1.通過Jquery輕松進行html（DOM）操縱和選擇。

2. 瀏覽文檔SessionStorage，（在重新加載時在broswer會話中設置和獲取項目）

3. 學習Json，創建一個json結構來記錄進度，並創建一個函數基於該json加載該部分。（使所有內容均由數據驅動），例如：

   [

   {sectionName：“ section1”，進度：“ started”}，{sectionName：“ section2”，進度：“ incomplete”}，
   ]

希望這可以幫助