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