重新载入页面时，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”}，
   ]

希望这可以帮助