Cookie使用实例代码分析

发布时间:2022-09-27 11:51:29 作者:iii
来源:亿速云 阅读:135

本篇内容介绍了“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使用实例代码分析

“Cookie使用实例代码分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. 在Vue中如何使用Cookie操作实例
  2. php实例代码分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

cookie

上一篇:怎么从浏览器中删除Cookie

下一篇:禁用Cookie后继续使用session怎么实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》