如何利用js操作cookie实现记住密码功能

 我来答
福喜900
推荐于2017-10-08 · TA获得超过6.1万个赞
知道大有可为答主
回答量:1.1万
采纳率:0%
帮助的人:9904万
展开全部
【什么是cookie】
“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。”
不同的浏览器可能对cookie的储存方式不同,但是相同的是cookie中的内容都是保存在客户一端的。(session是保存在服务器上的)

【cookie的几点注意】
说的通俗一点,cookie就是一个字符串(这点可以用alert(typeof document.cookie)来验证),用来保存一些客户信息。
程序员可以对其写入任何想写入的东西,只要不超过cookie的大小限制(4kb)。
cookie的操作办法最简单的说法就是对document.cookie进行操作(写入你要需保存的内容)。
cookie有一个关键字是expires,它是用来设置cookie的有效期的,默认情况(不设置expires)是当浏览器关闭的时候,自动清除cookie。
一般来说,cookie的形式都是这样的:"cookieName1=cookie1;cookieName2=cookie2;expires=" + date,这里需要注意几点:
1.注意分号
";expires="之前的字符串你可以随便写,但是";expires="必须遵循这个写法,尤其是这个分号不能少,不然浏览器是认不出你的expires(过期时间),而把它当成cookie内容的一部分。
例如:
如果你写成

1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);  //date设置为十天之后
6 document.cookie = "username=findingsea^password=123^expires=" + date.toGMTString();  //toGMTString方法将date转换成格林尼治时间格式
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>

打开firefox下的选项-->隐私-->删除私人Cookie
可以到cookie过期的时间为当前会话结束时,也就是浏览器关闭的时候。换而言之,就是我们设置的expires完全没有起作用。

要fix也很容易,只要在上段代码中,在expires前加一个分号,也就是改成"...^;expires=",重新运行firefox查看cookie
可以看到过期时间为10之后(今天是2012年8月31日),expires设置成功,所以说分号很重要,很重要!!!

2.如何清除cookie

其实清除cookie这种说法是不准确的,应该是说让cookie过期。因为不能直接对cookie置空,(如果以为document.cookie="",这样就能清空cookie,我只能说少年你还是太天真了),而使cookie的方法也很简单,就是设置expires。我们可以把expires设置到很久以后,让cookie能长期保存,那同样我们也能把cookie设置到过去,让cookie马上过期。这个“过去”就是1970年1月1号,我们将expires设置到这个时间,cookie就过期了。至于为什么是这个时间,请参考关于1970-1-1 00:00.000的知识 。

3.如何设置和获取cookie

<在一条cookie中设置多个变量>

JavaScript没有提供根据cookie名来获取cookie值的方法。上面已经讲过了,document.cookie只是一个字符串而已,我们就对其进行字符串解析即可。要在获取的时候进行解析,就要需要在设置的时候设置标识符,这里需要注意的点和第一点刚好相反,在第一点中,我们是千叮咛万嘱咐不要忘记分号,而且在设置标识符的时候,我建议尽量不要用分号当做分隔符,我们来看一下对比;

代码1:

1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);
6 document.cookie = "username=findingsea;password=123;expires=" + date.toGMTString();
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>

代码2:

1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);
6 document.cookie = "username=findingsea^password=123^;expires=" + date.toGMTString();
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>

可以很清楚地看到,代码1中的password=123都“吞掉了”,造成这个现象的原因是,浏览器在保存cookie的时候,在读到分号之后,就认为cookie的内容结束了,浏览器理想的cookie形式是"cookieName=cookie;expires=date",但是显然我们并不满足这样,所以要在一条cookie中设置多个值,就需要像代码2这样用标示符(不要分号)进行分割。然后在读取的时候,也根据标示符进行逐个读取。
<设置多个cookie>
当然当然当然,以上是正对相对复杂的需要我们在同一条cookie中设置多个变量的情况,更规范的情况是一条cookie就储存一个对象。不过这样的话,你的cookie就要占用更多的空间(相比于一条cookie中设置多个变量而已,因为你需要为每个cookie都设置一个expires)。不过这样的操作更加简单和规范,推荐在变量少的情况下使用。
百度网友9061227
2015-01-14 · TA获得超过282个赞
知道小有建树答主
回答量:257
采纳率:0%
帮助的人:100万
展开全部
<script language="javascript" type="text/javascript">  
function checkInCorrect()      //判断用户名和密码是否为空 

     if (document.getElementById('txtUserName').value=="") 
   { 
    alert('请输入用户名!') 
    document.getElementById('txtUserName').focus(); 
    return false 
   } 
   if (document.getElementById('txtPassword').value=="") 
   { 
    alert('请输入密码!') 
    document.getElementById('txtPassword').focus(); 
    return false 
   } 
   else 
   { 
    saveInfo(); 
    return true; 
   } 

 
 
saveInfo = function(){ 
try{ 
   var isSave = document.getElementById('chkRememberPwd').checked;   //保存按键是否选中 
   if (isSave) { 
    var usernm = document.getElementById('txtUserName').value; 
    var userpsw = document.getElementById('txtPassword').value; 
    if(usernm!="" && userpsw!=""){ 
     SetCookie(usernm,userpsw); 
    } 
   }else {   
    SetCookie("",""); 
   } 
}catch(e){ 
 


 
function SetCookie(usern,psw){ 
var Then = new Date()  
Then.setTime(Then.getTime() + 1866240000000)  
document.cookie ="username=" + usern + "%%"+psw+";expires="+ Then.toGMTString() ; 

 
 
function GetCookie(){  
var nmpsd; 
var nm; 
var psd; 
var cookieString = new String(document.cookie) 
var cookieHeader = "username=" 
var beginPosition = cookieString.indexOf(cookieHeader) 
cookieString = cookieString.substring(beginPosition); 
var ends=cookieString.indexOf(";"); 
if (ends!=-1){ 
   cookieString = cookieString.substring(0,ends); 

if (beginPosition>-1){ 
   nmpsd = cookieString.substring(cookieHeader.length); 
   if (nmpsd!=""){ 
    beginPosition = nmpsd.indexOf("%%"); 
    nm=nmpsd.substring(0,beginPosition); 
    psd=nmpsd.substring(beginPosition+2); 
    document.getElementById('txtUserName').value=nm; 
    document.getElementById('txtPassword').value=psd; 
    if(nm!="" && psd!=""){ 
     document.forms[0].checkbox.checked = true 
    } 
   }  


</script>  
</head>  
<body onLoad="document.getElementById('txtUserName').focus();GetCookie();"> 
<form> 
    用户名:<input type="text" ID="txtUserName" onblur="GetPwdAndChk()"> <br> 
    密  码:<input type="password" ID="txtPassword"> <br> 
    <input type="checkbox" ID="chkRememberPwd" />记住密码 <br> 
    <input type="button" OnClick="checkInCorrect()" value="进入"/>  
</form>    
</body>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2015-11-11
展开全部
  如何设置COOKIE的有效时间
  Cookie是由服务器端生成,发送给User-Agent(一般是浏览器)
  浏览器会将Cookie的key/value保存到某个目录下的文本文件内,

  如何设置COOKIE的有效时间
  下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置
  为启用cookie)。2月1日——匈牙利与韩国建交。Cookie名称和值可以由服务器端开发自己定义

  如何设置COOKIE的有效时间
  对于JSP而言也可以直接写入jsessionid,这样服务器可以知道
  该用户是否是合法用户以及是否需要重新登录等,服务器可以设
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式