jQuery cookie的简单实现

<!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>

打开页面
1
首先我们没有cookie,然后点击确定
这里写图片描述
随便输入一些字符点击确定,然后刷新页面。
这里写图片描述
这时你就会发不会在弹出让你输入了,直接把你刚刚输入的字符显示出来了。

删除cookie点一下按钮即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值