JavaScript :cookie初步接触使--登录

最新推荐文章于 2021-09-16 21:19:47 发布

cwzhsi

最新推荐文章于 2021-09-16 21:19:47 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： JS cookie

本文链接：https://blog.csdn.net/cwzhsi/article/details/42004531

版权

JS 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。
而Cookie是运行在客户端的，所以可以用JS来设置Cookie.
假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，对于JS中
的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存
的效果。解决这个问题的最好的方案是采用cookie来保存变量的值。
简单的说，cookie是以键值对的形式保存的，即key=value的格式，各个cookie之间一般是以";"分隔的。
cookie可以实现严格的跨页面全局变量的要求.
cookie是存于用户硬盘的一个文件。这个文件对应于一个域名，便使这个cookie可用.因此，cookie可以跨越一个域名下的多个网页，
但不能跨越多个域名使用。
在cookie设置中，用escape()函数进行编码，可避免乱码和特殊字符问题；当使用escape()编码后，在取出值以后需要使用unescape()

进行解码才能得到原来cookie的值

JS设置cookie

假设在A页面中要保存变量username的值（"jack"）到cookie中，key值为name,则相应的JS代码为:
document.cookie=“name”+username;
设置cookie时可以直接给document.cookie赋值,而且后面的值不会覆盖前面额值，它具有一种累加机制。
cookie的值可以由document.cookie直接获得，但这样获取的是所有的cookie的值；要通过一指定的cookie名称来获得所对应的值
，则需要做一些处理

JS读取cookie
假设cookie中存储的内容为:name=jack;password=123
则在B页面中获取变量username的JS代码如下:

var username=document.cookie.split(";")[0].split("=")[1];

JS操作cookie方法!

写cookie

function setCookie(name,value)
{
    var Days =30;
	var exp=new Date();
	//设置cookie过期时间
	exp.setTime(exp.getTime()+Days*24*60*60*1000)；
	document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();
}

读cookie

function GetCookie(cookieName)
{
    /* Cookie字符串*/
	var theCookie=""+document.cookie;
	/* 找到cookieName的位置*/
	var ind=theCookie.indexOf(cookieName);
	/*如果未找到cookie，返回空字符串*/
	if(ind==-1 ||cookieName==“")return "";
	/*确定分号的位置*/
	var ind1=theCookie.indexOf(';',ind);
	if(ind1==-1)
	{
	    ind1=theCookie.length;
	}
	/*读取cookie的值*/
	return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}

删除指定名称的cookie

function deleteCookie(username)
{
    var exp=new Date();
	exp.setTime(exp.getTime()-1);
	var cval=getCookie(username);
	/*删除一个cookie，就是将其过期时间设定为一个过去的时间*/
	if(cval!=null)
	{
	    document.cookie=name+"="+cval+";expires="+exp.toGMTString();
	}
}

下面是一个用JS写的登录功能 login.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
/**
 * 
 */
 function SetCookie(cookieName,cookieValue,nDays)
 {
	//当前日期
	var today=new Date();
	//cookie过期时间
	var expire=new Date();
	/* 如果未设置nDays参数或者nDays为0，取默认值 1 */
	if(nDays==null||nDays==0){
		nDays=1;
	}
	//计算cookie的过期时间
	expire.setTime(today.getTime()+nDays*24*60*60);
	//设置Cookie值
	document.cookie=cookieName+"="+escape(cookieValue)+";expires="+expire.toLocaleDateString();
 }
 
 function logine(){
	 //用户名
	 var username= $("user").value;
	 var password= $("pass").value;
	 var save=$("save").checked;
	 if(username=="admin" && password=="admin"){
		 if(save){
			 SetCookie("username", username, 7);
		 }
		 else{
			 SetCookie("username", username, 1);
		 }
		 document.location = "page2.html";
		 
	 }
	 else{
		 alert("用户名或密码错误");
	 }
 }
 function $(id){
	 return document.getElementById(id);
 }
</script>
</head>
<body>
	<div id="main">
		<div>
			<span>用户名:</span><input type="text" id="user" />
		</div>
		<div>
			<span>密码:</span><input type="password" id="pass" />
		</div>
		<div>
			<input type="checkbox" id="save" />七天内无需登陆
		</div>
		<div>
			<input type="button" οnclick="logine()" value="登录" />
		</div>
	</div>
</body>
</html>

运行的页面如下：

page.html内部页面，必须在登陆后才能使用，该页面需要对用户当前PC的cookie进行判断，如果发现用户已通过机器登陆过，该页面显示
欢迎信息，否则显示请登陆
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function GetCookie(cookieName){
         var theCookie=""+document.cookie;
         //找到cookieName的位置
         var ind=theCookie.indexOf(cookieName);
         /*
          * 如果未找到cookieName，返回空字符串
          */
         if(ind==-1||cookieName==""){
              return "";
         }
         //确定分号的位置
         var ind1=theCookie.indexOf(';',ind);
         if(ind1==-1)
         {
              ind1=theCookie.length;
         }
	
	//读取cookie的值
	return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
	}

	function init() {
		// 从Cookie中读取用户名信息
		var username = GetCookie("username");
		// 如果用户已经登录过
		if (username && username.length > 0) {
		    
			//显示欢迎信息
			$("msg").innerHTML = "<h2> 欢迎光临:" + username + "!</h2>";
		} else {
			$("msg").innerHTML = "<a href='login.html'>请返回，登录！</a>";
		}
	}

	function $(id) {
		return document.getElementById(id);
	}
</script>
</head>
<body οnlοad="init()">
	<div id="msg"></div>
</body>
</html>

运行的效果如下：