需求:用户访问页面之后出现弹框,点击关闭之后24小时内不会再出现。
实现:cookie
首先温习一点cookie的知识,明确以下几点:
什么是cookie?
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。------W3C。
1、创建:Cookie是可以被Web服务器设置的字符串,并且可以保存在浏览器中。
2、发送:当浏览器访问了一个页面时候,web服务器设置了一个cookie,并将这个cookie和当前访问的页面一起返回给浏览器,
3、保存:浏览器接到cookie之后,就会保存起来,
4、发送:在它访问另外页面的时候会把这个cookie也带上,Web服务器接到请求时也能读出cookie的值,根据cookie值的内容就可以判断和恢复一些用户的信息状态。
一、创建cookie
function setCookie(c_name,value,expiredays)//cookie名字、值、过期时间 { var exdate=new Date(); exdate.setHours(exdate.getHours()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); } 使用方法:setCookie('myname','leaf',10);
二、获取cookie--------w3
function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" } //或者 function getcookie(objname){ var arrstr = document.cookie.split("; "); for(var i = 0, len = arrstr.length; i < len; i ++){ var temp = arrstr[i].split("="); if(temp[0] == objname) return unescape(temp[1]); } }
三、使用
function checkCookie(c_name,c_value,ex_time) { c_name=getCookie(c_name) if (c_name!=null && c_name!=""){
/***dosomething***/
}else{
setCookie(c_name,c_value,ex_time);//重新设置 } }
四、把读、写、删写成cookieUtil对象
var CookieUtil = { get:function(name){ //encodeURLComponent()对URL进行编码 var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if(cookieStart >= -1){ var cookieEnd = document.cookie.indexOf(";",cookieStart); if(cookieEnd == -1){ cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length, cookieEnd)); } return cookieValue; }, set:function(name, value, expires, path, domain, secure){ var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if(expires instanceof Date){ cookieText += "; expires=" + expires.toGMTString(); } if(path){ cookieText += "; path=" + path; } if(domain){ cookieText += "; domain=" + domain; } if(secure){ cookieText += "; secure"; } document.cookie = cookieText; }, unset:function(name, path, domain, secure){ this.set(name, "", new Date(0), path, domain, secure); } };
五、实现需求
//显示弹框 function showPopUp(){ /***********/ } //实现函数
checkCookie('isShowPopUp',true,10);