!494 注册短信倒计时存到localstorage

src/Common/Utils.ts

@@ -257,57 +257,3 @@ export function getFileSize(size: number)
     }
 }
 
-//CookieUtils
-/**
- * 添加 cookie
- * @param name 名称
- * @param value 值
- * @param expiresHours 过期时间
- */
-export function addCookie(name, value, expiresHours)
-{
-    let cookieString = `${name}=${escape(value)}`;
-    // 判断是否设置过期时间,0代表关闭浏览器时失效
-    if (expiresHours > 0)
-    {
-        const date = new Date();
-        date.setTime(date.getTime() + expiresHours * 1000);
-        cookieString = `${cookieString};expires=${date.toUTCString()}`;
-    }
-    document.cookie = cookieString;
-}
-
-/**
- * 修改 cookie
- * @param name 名称
- * @param value 值
- * @param expiresHours 过期时间
- */
-export function editCookie(name, value, expiresHours)
-{
-    let cookieString = `${name}=${escape(value)}`;
-    if (expiresHours > 0)
-    {
-        const date = new Date();
-        date.setTime(date.getTime() + expiresHours * 1000); // 单位是毫秒
-        // @ts-ignore
-        cookieString = `${cookieString};expires=${date.toGMTString()}`;
-    }
-    document.cookie = cookieString;
-}
-
-/**
- * 根据名字获取cookie的值
- * @param name
- */
-export function getCookieValue(name)
-{
-    const strCookie = document.cookie;
-    const arrCookie = strCookie.split('; ');
-    for (const cookie of arrCookie)
-    {
-        const arr = cookie.split('=');
-        if (arr[0] === name)
-            return unescape(arr[1]);
-    }
-}

src/UI/Components/MainContent/Regist.tsx

@@ -7,7 +7,7 @@ import { IObservableValue, observable } from 'mobx';
 import { PostJson, RequestStatus } from '../../../Common/Request';
 import { SignUrl, ResourcesCDN_HOST } from '../../../Common/HostUrl';
 import { AppToaster } from '../Toaster';
-import { addCookie, editCookie, getCookieValue } from '../../../Common/Utils';
+import { safeEval } from '../../../Common/eval';
 
 interface IRegistInput
 {
@@ -32,7 +32,8 @@ enum InputType
     PHONE = 2,
     OK = 3,
 }
-
+const prefix = "time_";
+let SMSTimer: NodeJS.Timeout;
 @inject("store")
 @observer
 export default class Regist extends React.Component<{ store?: TopPanelStore }> {
@@ -64,15 +65,6 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }> {
             PHONE: Intent.NONE,
         };
     }
-    UNSAFE_componentWillMount()
-    {
-        const countdown = getCookieValue('secondsremained') ? getCookieValue('secondsremained') : 0; // 获取cookie值
-        if (countdown !== undefined && countdown > 0)
-        {
-            this.SMSBtnText = `${countdown}s后重新获取`;
-            this.settime(); // 开始倒计时
-        }
-    }
     handleRegist = async () =>
     {
         if (this.inputIntent.PSW !== Intent.SUCCESS)
@@ -152,35 +144,65 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }> {
                 message: "短信已发送，请注意查收",
                 timeout: 1000,
             });
-            addCookie('secondsremained', 120, 120);
-            const countdown = getCookieValue('secondsremained') ? getCookieValue('secondsremained') : 0; // 获取cookie值
-            if (countdown !== undefined && countdown > 0)
-            {
-                this.settime(); // 开始倒计时
-            }
+            //存入LocalStorage
+            localStorage.setItem(prefix + this.registInput.user_phone, new Date().getTime().toString());
+            //开始倒计时
+            this.SetTime();
         }
         else
             this.SMSBtnText = `获取短信验证码`;
     }
-    private settime = () =>
+    private SetTime = (count: number = 120) =>
     {
-        let countdown = 120;
-        // @ts-ignore
-        countdown = getCookieValue('secondsremained');
-        const timer = setInterval(() =>
+        if (SMSTimer)
+            clearInterval(SMSTimer);
+        SMSTimer = setInterval(() =>
         {
-            if (countdown <= 0)
+            if (count <= 0)
             {
-                clearInterval(timer);
+                clearInterval(SMSTimer);
                 this.SMSBtnText = '获取短信验证码';
-            } else
+                this.inputIntent.PHONE = Intent.SUCCESS;
+            }
+            else
             {
-                this.SMSBtnText = `${countdown}s后重新获取`;
-                countdown--;
+                this.SMSBtnText = `${count}s后重新获取`;
+                count--;
             }
-            editCookie('secondsremained', countdown, countdown + 1);
         }, 1000);
     }
+    // 检查当前手机号在LocalStorage中是否已有记录. 如有记录,倒计时是否过期
+    CheckPhoneNumFromLocalStorage()
+    {
+        let user_phone = this.registInput.user_phone;
+        let aa = localStorage.getItem(prefix + user_phone);
+        clearInterval(SMSTimer);
+        if (aa)
+        {
+            let time = safeEval(aa);
+            let timeLine = Math.floor((new Date().getTime() - time) / 1000);
+            if (timeLine < 120)
+            {
+                //计时未过期的号码
+                this.errMsg = "与上次发送间隔不足两分钟";
+                this.flag = InputType.PHONE;
+                this.SetTime(120 - timeLine);
+            }
+            else
+            {
+                //计时已过期的号码
+                localStorage.removeItem(prefix + user_phone);
+                this.SMSBtnText = '获取短信验证码';
+                this.inputIntent.PHONE = Intent.SUCCESS;
+            }
+        }
+        else
+        {
+            //LocalStorage无记录的号码
+            this.SMSBtnText = '获取短信验证码';
+            this.inputIntent.PHONE = Intent.SUCCESS;
+        }
+    }
     valueTest = async (type: InputType) =>
     {
         let text = "";
@@ -238,7 +260,7 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }> {
                     {
                         this.flag = InputType.OK;
                         this.errMsg = "";
-                        this.inputIntent.PHONE = Intent.SUCCESS;
+                        this.CheckPhoneNumFromLocalStorage();
                     }
                     else
                     {