封装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>
< src=\"../js/cookie.js\"></ >
< >
var usr=document.getElementById(\'username\');
var paw=document.getElementById(\'paw\');
document.getElementById(\'btn\'). =function () {
if(usr.value!=\'\' && paw.value!=\'\'){//如果用户名不为空 则开始设置cookie. 并且跳转到主页
//获取用户 输入的名字和密码保存到相应的key中，并且设置过期事件为2分钟；
setCookie(\'username\',usr.value,2);
setCookie(\'paw\',paw.value,2);
window.location.href=\'index.html\';
}
}
</ >
</body>
主页面 获取cookie
<body>
<h1>欢迎您的到来</h1>
<h3 id=\"username\"></h3>
</body>
< src=\"../js/cookie.js\"></ >
< >
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);
</ >
继续阅读与本文标签相同的文章
-
学宏程序编程，这些知识必不可少！
2026-05-14栏目： 教程
-
华为准备卖出“落后”的5G，多家美企极力竞争！任正非格局太大！
2026-05-14栏目： 教程
-
百度：飞桨深度学习平台已累计服务150多万开发者
2026-05-14栏目： 教程
-
滴滴公布安全功能数据：近2亿用户添加紧急联系人
2026-05-14栏目： 教程
-
滴滴自动驾驶或将于年底落地上海
2026-05-14栏目： 教程