前端手机验证码cookie存储

注册的时候经常会有手机验证码的输入这个环节，在第一次点击发送了验证码只后，比如倒计时只走了10秒钟，然后刷新的话，倒计时要还是存在的，这个时候就要有一个cookie的存在了。

html的代码

 <input type="button" id="second" value="获取验证码"/>

js代码

 <!--逻辑功能代码 -->
     <script>
         //发送验证码时添加cookie
         function addCookie(name, value, expiresHours) {
             var cookieString = name + "=" + encodeURI(value);
             //判断是否设置过期时间,0代表关闭浏览器时失效
             if (expiresHours > 0) {
                 var date = new Date();
                 date.setTime(date.getTime() + expiresHours * 1000);
                 cookieString = cookieString + ";expires=" + date.toUTCString();
             }
             document.cookie = cookieString;
 
         }
         //修改cookie的值
         function editCookie(name, value, expiresHours) {
             var cookieString = name + "=" + encodeURI(value)
             if (expiresHours > 0) {
                 var date = new Date();
                 date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
                 cookieString = cookieString + ";expires=" + date.toGMTString();
             }
             document.cookie = cookieString;
         }
         //根据名字获取cookie的值
         function getCookieValue(name) {
             var strCookie = document.cookie;
             var arrCookie = strCookie.split("; ");
             for (var i = 0; i < arrCookie.length; i++) {
                 var le = arrCookie.length -1;
                 var arr = arrCookie[i].split("=");
                 if (arr[0] == name) {
                     return decodeURI(arr[1]);
                     break;
                 } else {
                     return "";
                     break;
                 }
             }
         }
         $(function () {
             $("#second").click(function () {
                 sendCode($("#second"));
             });
             v = getCookieValue("secondsremained");//获取cookie值
             if (v > 0) {
                 settime($("#second"));//开始倒计时
             }
         })
         //发送验证码
         function sendCode(obj) {
             var phone_1 = $("#phone_1").val();
             var result = isPhoneNum(); //判断手机号码是不是正确的
             if (result) {
                 var code_1 = $('#code_1').val();
                 if (code_1) {
                     doPostBack('<?php echo url(U . 'index.php?a=index/User/sms'); ?>', backFunc1, {"phone_1": phone_1, "code": code_1});
                     addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s
                     settime(obj);//开始倒计时
                 } else {
                     alert('请输入验证码！');
                     return false;
                 }
             }
         }
         //将手机利用ajax提交到后台的发短信接口
         function doPostBack(url, backFunc, queryParam) {
             $.ajax({
                 async: false,
                 cache: false,
                 type: 'POST',
                 url: url, // 请求的action路径
                 data: queryParam,
                 error: function () {// 请求失败处理函数
                 },
                 success: backFunc  //请求成功处理函数
             });
         }
         function backFunc1(data) {
            //请求成功的函数处理
         }
         //开始倒计时
         var countdown;
         function settime(obj) {
             countdown = getCookieValue("secondsremained");
             if (countdown == 0) {
                 obj.removeAttr("disabled"); //添加不可以再点击事件
                 obj.val("获取验证码");
                 return;
             } else {
                 obj.attr("disabled", true);
                 obj.val("重新发送(" + countdown + ")");
                 countdown--;
                 editCookie("secondsremained", countdown, countdown + 1);
             }
             setTimeout(function () {
                 settime(obj)
             }, 1000) //每1000毫秒执行一次
         }
         //校验手机号是否合法
         function isPhoneNum() {
             var phone_1 = $("#phone_1").val();
             var myreg = /^1[34578]\d{9}$/;
             if (!myreg.test(phone_1)) {
                 alert('请输入有效的手机号码！');
                 return false;
             } else {
                 return true;
             }
         }
 
         });
     </script>