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调用

猜你喜欢