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

逃离我推掉我的手 2022-08-06 03:21 109阅读 0赞

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>

运行的页面如下：

**![Center][]**

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>

运行的效果如下：

**![Center 1][]**

[Center]: /images/20220806/56be016efc944481b47ce33361de0064.png
[Center 1]: /images/20220806/dddb573ffce742eaa195a53642a7e82a.png