使用cookie缓存数据

在做用户注册时，需要验证手机号码，为避免频繁发送。做了一个倒计时的按钮。

 

但是页面刷新后数据就全没了，包括倒计时就失效了，又可以发送短信了。

需要借助cookie，把数据保存数据在本地。

cookie搭配jQuery使用；

先导入jQuery；再引入cookie：

当然，这里我并未真的发送短信，而是后台接口模拟的验证码，传出页面。

增删查改操作：

增：

查：$.cookie("timeCounter")

checkPhone

timeCounter

 

 

输入框和倒计时按钮都是不可修改/点击的【disable：true】，直到清零才恢复可以修改【disable：false】。

$('#timeBtn').attr("disabled", false);
//输入框也可修改
$('#phone').attr("disabled", false);

即便刷新页面，onload后，会自动读取cookie有无值，有值就渲染填充进dom，继续倒计时。

    /**
     * 手机验证码倒计时
     */
    $(function() {
        if ($.cookie("timeCounter") != undefined && $.cookie("timeCounter") != 'NaN' && $.cookie("timeCounter") != 'null') { //cookie存在倒计时
            timekeeping();
        } else { //cookie 没有倒计时
            $('#timeBtn').attr("disabled", false);
            //输入框也可修改
            $('#phone').attr("disabled", false);
        }

        function timekeeping() {
            //把按钮设置为不可以点击
            $('#timeBtn').attr("disabled", true);
            $('#timeBtn').val('请等待' + $.cookie("timeCounter") + '秒');
            //cookie读取电话号码，填入表单，输入框也不可以修改
            $('#phone').val($.cookie("checkPhone"));
            $('#phone').attr("disabled", true);
            var interval = setInterval(function() { //每秒读取一次cookie
                //从cookie 中读取剩余倒计时
                timeCounter = $.cookie("timeCounter");
                console.log(timeCounter);
                //在发送按钮显示剩余倒计时
                $('#timeBtn').val('请等待' + timeCounter + '秒');
                //把剩余总倒计时减掉1
                timeCounter--;
                if (timeCounter == 0) { //剩余倒计时为零，则显示 重新发送，可点击
                    //清除定时器
                    clearInterval(interval);
                    //删除cookie
                    $.removeCookie('timeCounter');
                    $.removeCookie('checkPhone');
                    //显示重新发送
                    $('#timeBtn').val('重新发送');
                    //把发送按钮设置为可点击
                    $('#timeBtn').attr("disabled", false);
                    //把phone输入框设置为可输入
                    $('#phone').attr("disabled", false);
                } else { //剩余倒计时不为零
                    //重新写入总倒计时
                    $.cookie("timeCounter", timeCounter);
                }
            }, 1000);
        }
        //绑定发送按钮
        $('#timeBtn').click(function(event) {
            //校验手机号码
            var phone = $('#phone').val();
            //保存手机号
            $.cookie("checkPhone", phone);

            var pre = /^[1][358][0-9]{9}$/;
            if (phone == '') {
                layer.open({
                    content: '手机号码不能为空',
                    time: 2000
                });
                return false;
            } else {
                var pre = /^[1][358][0-9]{9}$/;
                if (!pre.test(phone)) {
                    layer.open({
                        content: '手机号码格式有误！',
                        time: 2000
                    });
                    return false;
                }
            }

            $.ajax({
                url: '/mall/verification/sendsms', //服务器发送短信
                type: 'post',
                dataType: 'json',
                data: {
                    phone: phone
                },
            }).done(function(data) {
                var str = data.message;//"发送短信验证码成功，请注意查看您的手机";
                if (data.state == 0) {
                    $.cookie("timeCounter", 60);
                    timekeeping();
                } else {
                    switch (data.state) {
                        case '160038':
                            str = "短信验证码发送过频繁";
                            break;
                        case '160034':
                            str = "号码黑名单";
                            break;
                        case '160000':
                            str = "系统错误";
                            break;
                        case '000000':
                            str = "发送成功";
                            break;
                        case '112300':
                            str = "接收短信的手机号码为空";
                            break;
                        case '160040':
                            str = "验证码超出发送上限";
                            break;
                        case '160042':
                            str = "号码格式有误";
                            break;
                        default:
                            str = "发送验证码失败";
                            break;
                    }
                }
                layer.open({
                    content: str,
                    // time: 2000
                });
            })
                .fail(function() {
                    console.log("出错！");
                })
                .always(function() {
                    console.log("完成发送！");
                });
        });
    })

在哪里查看cookie呢？谷歌浏览器：

拓展：（【记住密码】功能：搭配md5或base64加密保存，缺点是不够安全）