cookie存储

封装cookie

//设置cookie    名字  值  过期时间
function setCookie(cookieName,cookieValue,expicesMinutes) {
    var s='';
    //检测过期参数有没有传递。
    if(expicesMinutes!==undefined){
        var date=new Date();
        date.setMinutes(date.getMinutes()+expicesMinutes);
        s= ";expires="+date.toGMTString(); 
    }
    document.cookie= cookieName + '=' + cookieValue + s;
}

//获取cookie
function getCookie(cookieName) {
    //获取所有cookie;
    var cookie=document.cookie;
    var arr=cookie.split("; ");  //分割成数组['username=李飞' , 'password=21212']
    for(var i=0;i<arr.length;i++){//再次分割每一项   都是一个数组
        var brr=arr[i].split('=');  //['username','李飞'];
        if(brr[0] === cookieName){//如果值等于传入进来的name 则返回后面的值
            return brr[1];
        }
    }
    return null;//没找到
}

登陆页面 设置cookie

<body>
    <h2>user login</h2>
    <form>
        <input type="text" id="username"><br>
        <input type="password" id="paw"><br>
        <input type="button" id="btn" value="login">
    </form>
    <script src="../js/cookie.js"></script>
    <script>
        var usr=document.getElementById('username');
        var paw=document.getElementById('paw');
        document.getElementById('btn').onclick=function () {
            if(usr.value!='' && paw.value!=''){//如果用户名不为空  则开始设置cookie. 并且跳转到主页
            //获取用户 输入的名字和密码保存到相应的key中,并且设置过期事件为2分钟;
                setCookie('username',usr.value,2);
                setCookie('paw',paw.value,2);
                window.location.href='index.html';
            }
        }
    </script>
</body>

主页面 获取cookie

<body>
    <h1>欢迎您的到来</h1>
    <h3 id="username"></h3>
</body>
<script src="../js/cookie.js"></script>
<script>
    var un=getCookie('username');//获取cookie的一个元素名字
    var pa=getCookie('paw');
    var h=document.getElementById('username');
    console.log(un);
    if(un === null){//若果un值不在了  证明时间过去了。则 重定向到登陆界面
        window.location.href='login.html';
    }else{
        h.innerHTML=un+pa;//如果拿到则表示欢迎
    }
    console.log(document.cookie);
</script>

cookie是document调用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值