javascript - 如何利用cookie让倒计时刷新和退出页面之后不重置？

Question

function CountDown(){  

    if(maxtime>=0){  
   
            minutes = Math.floor(maxtime/60);     
            seconds = Math.floor(maxtime%60);  
 
        msg = "距离结束还有<a style='font-size:20px;font-weight:bold;color:red;padding:4px;'>"+minutes+"分"+seconds+"秒</a>";  
        document.all["timer"].innerHTML=msg;     
        if(maxtime == 5*60)   
            alert('注意，还有5分钟!');     
        --maxtime;  

    }else{     
        clearInterval(timer);     
        alert("时间到，结束!");  
  
   
        }  
} 

这个倒计时现在刷新页面就会重新倒计时，现在想要的效果是刷新页面不重置，同时关闭页面倒计时依然能够自己进行，并且在倒计时结束后继续重新开始倒计时，所以直接把maxtime记录在cookie最多只能让他保留关闭页面之前的值，倒计时下次进来还是从这个时间开始，能不能让时间能够自己继续跑

Answer 1

把minitus存进cookie里，setCookie，初始化页面的时候getCookie里取值，如果没有用默认值

Answer 2

cookie保存结束时间。时间到了，更新结束时间的cookie加5分钟

Answer 3

如果把时间放到cookie里会有几个个问题。
1、不能使用间隔存储。不能每隔多长时间存一次，如果我在第一次存储和第二次存储强制刷新浏览器，那么存储的时间是否就会不准确。
2、不能时间变一次就往cookie存一次。这样太耗费性能。每秒读写一次cookie，而且cookie必须存的是string，所以时间变一次，你就得先把时间转为string，然后在写到cookie里。而且读写也会耗费几毫米的时间。时间一长，并且不刷新页面的话，差值就会成倍放大。所以这种需求不提倡这样做。

解决方法只有一个。利用http的head方法。每次刷新后读取服务器响应头的Date获取时间。这样既能可以防止篡改cookie里的时间。又能提升性能，何乐而不为嘞！！！

上面的两位同学，考虑的场景确实少了些。

Answer 4

当第一次开始倒计时时，存入倒计时开始的时间到cookie (starttime)=+( new Date() ), 思路是这样的，starttime 之后有1个倒计时为0的点，有第2个倒计时为0的点，有第3个倒计时为0的点 etc..
然后关掉页面之后，重新打开，读取cookie并检测starttime 与当前的时间的差，与倒计时持续时间进行比较，如果还在第一个倒计时里面，得到剩余时间，否则在其它倒计时周期里面，依然得到离下一个计时终点的剩余时间，然后以这个剩余时间开始计时，就这样就可以不受卸载掉页面的影响。
实现代码如下：设置的倒计时周期为MAX_TIME=1*30 seconds

 var MAX_TIME=1*30,
        maxMill=MAX_TIME*1000
    var t=null,
        restTime=0;
    window.Cookie={
            get: function( n ) {
                var a = document.cookie.match( new RegExp( "(^| )" + n + "=([^;]*)(;|$)" ) );
                return a ? a[ 2 ] : a;
            },
            set: function( name, value, hour, domain, path ) {
                // if ( _.isObject( value ) )
                //     value = JSON.stringify( value );
                var sc = name + "=" + ( value + "" );
                hour = Number( hour ) || 48;
                path = path || "/";

                var date = new Date();
                date.setTime( date.getTime() + hour * 3600 * 1000 );
                sc += ";expires=" + date.toGMTString();
                if ( domain )
                    sc += ";domain=" + domain;
                sc += ";path=" + path;
                document.cookie = sc;
            },
            del: function( n, domain, path ) {
                var exp = new Date(), t = this, v;
                t.set( n, "", -10000, domain, path );
            }
        };
        t = Cookie.get('starttime');
        if( !t ){//首次载入存储时间点；

            Cookie.set('starttime', +( new Date() ) );
            restTime = MAX_TIME
        }else{//已经载入过了进行读取

            var timePoint=maxMill+Number( t ),
                currentTime=+( new Date() );
            if( timePoint > currentTime ){//刷新时还在第一个计时周期时
                restTime = ( ( timePoint-currentTime ) / 1000 )|0;
            }else{
               restTime = ( ( maxMill-( (currentTime-t) % maxMill ) ) / 1000 ) | 0;
            }
        }
        
    restTime --;
    
        setTimeout(function(){
            if(restTime>=0){  

               var minutes = Math.floor(restTime/60);     
               var seconds = Math.floor(restTime%60);  

               console.log(minutes+"分"+seconds+"秒"); 

                if(restTime == 1*20) {  
                    console.log('注意，还有20秒钟!'); 
                }    

                --restTime; 

                setTimeout(arguments.callee,1000);

            }else{
                console.log("时间到，结束!");
                }  
        },1000)