重新加载页面时重置 Javascript 更改答案

【问题标题】：Javascript changes reset when page reloads重新加载页面时重置 Javascript 更改
【发布时间】：2016-09-28 05:49:28
【问题描述】：

我的网站有一个单页结帐，所以我决定将它分成 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 更改并将它们重新加载到页面重新加载，以便用户在与表单交互后可以停留在同一步骤上？我想它可能会使用cookies或其他东西来解决，但我不知道该怎么做。

【问题讨论】：

本地存储或会话存储可能会对您有所帮助
如果您不想重新加载页面，请停止提交按钮默认操作
你不会编写javascript代码？
@newbee-dev 不，我看文档写你看到的js代码
@aatif-bandey 需要通过 mercurial 文档。我正在使用 Joomla CMS 和 Virtuemart...

标签： javascript html web-deployment virtuemart

【解决方案1】：

1.通过 Jquery 轻松进行 html (DOM) 操作和选择。

浏览文档 SessionStorage ，（在浏览器中设置和获取项目重新加载会话）
学习 Json ，创建一个 json 结构来记录进度，并根据该 json 创建一个函数来加载部分。（让一切由数据驱动）例如：

[

{ 节名：“节1”，进度：“开始” }, { 部分名称：“部分2”，进度：“不完整” },
]

希望对你有帮助

【讨论】：