如何使用本地存储和 jQuery 持续显示电子邮件验证 div。

huangapple go评论59阅读模式
英文:

How to keep showing email verification div with local storage jquery

问题

  1. 如果用户输入了他们的注册信息,但决定稍后完成OTP验证,然后刷新页面,第二个div应该仍然显示一个小时。

  2. 如果用户已经输入了他们的注册信息,但还没有验证OTP,您想知道如何存储未验证的注册数据。

当成功响应后存储数据后,通过添加类隐藏注册div并添加OTP验证表单。

英文:

Suppose you have a form that consists of two separate divs. The first div is for customer registration, and the second div is for OTP verification. I want to address two issues:

  1. If the user enters their registration details but decides to complete the OTP verification later, and then refreshes the page, the second div should still be shown for one hour.
  2. If the user has already entered their registration details but has not yet verified their OTP, you want to know how the unverified registration data can be stored.

As the rule to ask question I have to add code but my code is long so I haven't added here. Little guidance will be helpful.

when data is stored after getting success response I hide registeration div by adding class and add otp verification form

答案1

得分: 2

为解决第一个问题,您可以使用浏览器存储,如会话存储或本地存储,来存储一个标志,表示用户已完成注册但尚未完成OTP验证。当页面刷新时,您可以检查此标志,并在仍然在一小时内的情况下显示第二个div。

为解决第二个问题,您可以再次使用浏览器存储来存储未验证的注册数据。当用户完成OTP验证时,您可以检索存储的数据并相应处理。

// 存储表示无OTP验证的注册标志
sessionStorage.setItem('registrationWithoutOTP', true);

// 存储未验证的注册数据
const registrationData = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  // 其他注册详细信息
};
sessionStorage.setItem('unverifiedRegistrationData', JSON.stringify(registrationData));

// 检索标志和数据
const hasRegistrationWithoutOTP = sessionStorage.getItem('registrationWithoutOTP') === 'true';
const unverifiedRegistrationData = JSON.parse(sessionStorage.getItem('unverifiedRegistrationData'));

希望这能帮助您解决问题。

英文:

To address the first issue, you can use browser storage, such as session storage or local storage, to store a flag indicating that the user has completed the registration but not the OTP verification. When the page is refreshed, you can check for this flag and show the second div if it's still within the one-hour timeframe.

To address the second issue, you can use browser storage again to store the unverified registration data. When the user completes the OTP verification, you can retrieve the stored data and process it accordingly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

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

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月16日 17:21:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75470109.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定