javascript 如何使用本地存储jquery保持显示电子邮件验证div

iyr7buue  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(127)

假设您有一个由两个独立div组成的表单。第一个div用于客户注册,第二个div用于OTP验证。我想解决两个问题:
1.如果用户输入了他们的注册详细信息,但决定稍后完成OTP验证,然后刷新页面,则第二个div仍应显示一个小时。
1.如果用户已经输入了他们的注册详细信息,但是还没有验证他们的OTP,那么您需要知道如何存储未经验证的注册数据。
作为提问的规则,我必须添加代码,但我的代码很长,所以我没有在这里添加。小指导将是有益的。
在获得成功响应后存储数据时,我通过添加类隐藏registeration div并添加OTP验证表单

这是查询代码请阅读代码中的评论

success: function(data){
            $('.c_OAtL8Q').empty();
            $('#regCon').html('Continue');
            $('#regCon').removeClass('a_uB1q1E'); 
            var data = JSON.parse(data);
            if (data.success) {
              //bellow first line add class to hide previous div
            $(".c_1WExwb").addClass("c_lV80ks");  
            $(".create-account-content").addClass("p-0"); 
            $(".c_4Oaji1").removeClass("c_nKrtBX");
             $(".c_bUm8iB").text('Email Verification');
            $(".c_bUm8iB").addClass("c_6Q63dj");
            // bellow line add otp verification div
            $(".newcustomer").html('<input type="hidden" name="csrf_token" class="csrf_token" value="<?php echo CSRFHelper::generateCsrfToken(); ?>"><div class="c_OAtL8Q"><div class="c_TwsjHN"><p><span>Please enter the OTP we`ve sent to</span><span>'+data.success+'</span></p></div><div class="otp-box"><label>OTP</label><br><input type="text" id="onetimepassword" name="fname" placeholder="Enter 6 digit OTP" autocomplete="off"><div class="error d_hc1QLz"></div></div><div class="c_STeEvU"><button type="button" id="regen" class="c_6EV2yj regen" >Resend OTP</button></div><div class="button-box mb-4"><button type="button" id="auth" class="c_6EV2yj">Verify</button></div></div>');
            } else if(data.error) {
            $(".e_zEZTIS").html('<p id="error_message">'+data.error+'</p>');
            }
x7yiwoj4

x7yiwoj41#

要解决第一个问题,您可以使用浏览器存储(如会话存储或本地存储)来存储一个标志,指示用户已完成注册但未完成OTP验证。当页面刷新时,您可以检查此标志,如果第二个div仍在一小时内,则显示它。
要解决第二个问题,您可以再次使用浏览器存储来存储未经验证的注册数据。当用户完成OTP验证时,您可以检索存储的数据并进行相应处理。

// Store flag indicating registration without OTP verification
sessionStorage.setItem('registrationWithoutOTP', true);

// Store unverified registration data
const registrationData = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  // Other registration details
};
sessionStorage.setItem('unverifiedRegistrationData', JSON.stringify(registrationData));

// Retrieve flag and data
const hasRegistrationWithoutOTP = sessionStorage.getItem('registrationWithoutOTP') === 'true';
const unverifiedRegistrationData = JSON.parse(sessionStorage.getItem('unverifiedRegistrationData'));

相关问题