Javascript学习系列（六）：javascript控制Cookie，保留用户登录信息

最新推荐文章于 2024-06-21 16:41:46 发布

qfgg3

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量282

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

想要下一次进入自己的网站时保留用户信息以便简化登录手续，所以研究了Cookie。

Cookie是储存在用户本地上的数据，可以将用户的信息长久的保存到用户机的文件中。

请看这个登录的例子（如果有不懂的，请看javascript cookie详解）

登陆页login.html

[html]view plaincopy 
   
 <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <title>登录</title>  
 <script type="text/javascript" src="cookie.js"></script>  
 <script type="text/javascript" src="common.js"></script>  
 </head>  
   
 <body>  
 <form action="">  
     <p>  
         <span>UserName:</span>  
         <input id="userName" type="text" value=""/></p>  
     <p>  
         <span>Password:</span>  
         <input id="password" type="password" value=""/></p>  
     <p>  
         <span style="font-size:12px; color:blue;">记住密码10天</span>  
         <input id="saveCookie" type="checkbox" value="" /></p>  
     <p>  
         <input id="submit" type="button" value="GO" />  
     </p>  
 </form>  
 </body>  
 </html></span>  

common.js

[javascript]view plaincopy 
   
 <span style="font-size:18px;">function $(objStr){return document.getElementById(objStr);}  
   
 window.onload = function(){  
     //分析cookie值，显示上次的登陆信息  
     var userNameValue = getCookieValue("userName");  
     $("userName").value = userNameValue;  
       
     var passwordValue = getCookieValue("password");  
     $("password").value = passwordValue;      
       
     //写入点击事件  
     $("submit").onclick = function()  
     {  
         var userNameValue = $("userName").value;//取前台用户名的值  
         var passwordValue = $("password").value; //取前台密码的值  
           
         //服务器验证（模拟） 这里是对用户的一个验证．在项目中，你读取数据库的代码写在这  
         var isAdmin = userNameValue == "tch" && passwordValue =="123";  
         var isUserA = userNameValue == "java" && passwordValue =="123";  
         var isMatched = isAdmin || isUserA;  
           
         //如果存在这个用户,就把用户名和密码存进cookie  
         if(isMatched){   
             if( $("saveCookie").checked){    
                 setCookie("userName",$("userName").value,10,"/");  
                 setCookie("password",$("password").value,10,"/");  
             }      
             alert("登陆成功,欢迎你," + userNameValue + "!");  
             self.location.replace("welcome.html");  
         }  
         else alert("用户名或密码错误，请重新输入！");      
     }  
 }</span>  

cookie.js

[javascript]view plaincopy 
   
 <span style="font-size:18px;">// 新建cookie。  
 // hours为空字符串时,cookie的生存期至浏览器会话结束。  
 // hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。  
 function setCookie(name,value,days,path){  
     var name = escape(name);  
     var value = escape(value);  
     var expires = new Date();  
     expires.setTime(expires.getTime() + days*24*60*60*1000);  
     path = path == "" ? "" : ";path=" + path;  
     _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();  
     document.cookie = name + "=" + value + _expires + path;  
 }   
   
 //获取cookie值  
 function getCookieValue(name){  
     var name = escape(name);  
     //读cookie属性，这将返回文档的所有cookie  
     var allcookies = document.cookie;   
       
     //查找名为name的cookie的开始位置  
     name += "=";  
     var pos = allcookies.indexOf(name);      
     //如果找到了具有该名字的cookie，那么提取并使用它的值  
     if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败  
         var start = pos + name.length;                  //cookie值开始的位置  
         var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置  
         if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie  
         var value = allcookies.substring(start,end);  //提取cookie的值  
         return unescape(value);                           //对它解码        
         }    
     else return "";                                             //搜索失败，返回空字符串  
 }  
   
 //删除cookie  
 function deleteCookie(name,path){  
     var name = escape(name);  
     var expires = new Date(0);  
     path = path == "" ? "" : ";path=" + path;  
     document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;  
 }</span>  

qfgg3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习系列（六）：javascript控制Cookie，保留用户登录信息

想要下一次进入自己的网站时保留用户信息以便简化登录手续，所以研究了Cookie。 Cookie是储存在用户本地上的数据，可以将用户的信息长久的保存到用户机的文件中。请看这个登录的例子（如果有不懂的，请看javascript cookie详解）登陆页login.html[html] view plain cop
复制链接

扫一扫