<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cookie</title>
<h3>jQuery cookie的简单实现</h3>
</head>
<body onload="checkCookie()">
<button type="button" id="delCookie">删除cookie</button>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/jquery.cookie.js" ></script>
<script type="text/javascript">
//设置cookie
function setCookie(name,val,day){
//设置cookie的到期时间参数
var expires="expires:"+day;
//设置cookie(key,val,{到期时间},{cookie路径默认为当前页})
$.cookie(name,val,{expires,path:"/"});
}
function checkCookie(){
alert($.cookie("name"));
//通过key来拿到对应val
var user=$.cookie("name");
if (user!=""&&user!=null){
alert("Welcome again " + user);
}else {
//带输入框的弹窗
user = prompt("Please enter your name:","");
if (user!="" && user!=null){
setCookie("name",user,3);
}
}
}
//删除cookie
$('#delCookie').on("click",function(){
//直接将对应key的val设置成null就可以把删除掉
$.cookie("name",null,{path:"/"});
alert($.cookie("name"));
alert("删除cookie成功");
})
</script>
</body>
</html>
打开页面
首先我们没有cookie,然后点击确定
随便输入一些字符点击确定,然后刷新页面。
这时你就会发不会在弹出让你输入了,直接把你刚刚输入的字符显示出来了。
删除cookie点一下按钮即可。