您的位置：首页 > Web前端 > JavaScript

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

2014-12-18 13:45 344 查看
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" onclick="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 onload="init()"><div id="msg"></div></body></html>
运行的效果如下：
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航