cookie应用小实例

时间:2021-09-11 16:07:16

上篇介绍了cookie的基础知识,这篇介绍个小应用来熟悉cookie的用法

cookie应用小实例

如图,有一个输入框,和两个按钮,用用户名登陆后,如果没删除,退出页面后重新进来会直接显示用户名,这就是运用了cookie存储了用户名,和我们常见的记住用户名操作类似

基本结构:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie应用</title>
</head>
<body>
<input type="text" id="username"/>
<input type="button" id="login" value="登录"/>
<input type="button" id="delete" value="删除"/>
</body>

cookie值设置部分,注意封装函数setCookie和getCookie的运用:

<script type="text/javascript">
	var user = document.querySelector('#username');
	var login = document.querySelector('#login');
	var del = document.querySelector('#delete');
	if(getCookie('username')){
		user.value = getCookie('username');
	}
	login.onclick = function(){
		alert('登陆成功');
		setCookie('username',user.value,5);
	}
	del.onclick = function(){
		removeCookie('username');
		user.value = '';
	}
	function setCookie(c_name,value,expiredays)
	{
		var exdate=new Date();
		exdate.setDate(exdate.getDate()+expiredays);
		document.cookie=c_name+ "=" +escape(value)+
		((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
	}
	function getCookie(key){
		var arr1 = document.cookie.split(';');
			for(var i = 0;i< arr1.length;i++){
				var arr2 = arr1[i].split('=');
				if(arr2[0] == key){
					return arr2[1];
				}
		}
	}
	function removeCookie(key){
		setCookie(key,'',-1);
	}

代码写完后,验证一下是否成功(对应代码应放在服务器环境下运行):

输入用户名登录

cookie应用小实例

退出页面,重新进入:

cookie应用小实例

点击删除按钮

cookie应用小实例

工作一切正常,完成啦!