记住密码

最新推荐文章于 2023-10-11 19:39:12 发布
最新推荐文章于 2023-10-11 19:39:12 发布
阅读量644 收藏 1
点赞数
分类专栏： java web

在网站中,我们经常看到每当我们准备登陆时,网页询问我们是否保存用户名和密码,以便下次登陆时不用再次输入。诸如此类的功能如何实现哪？经过两天的研究，终于有了收获！现将我的经验与大家分享。
      在网页中记录用户的信息通常有如下几种方式：Session、Cookie、以及.Net环境下的ViewState等。比较起来，Session将用户的信息暂存在内存中，除非用户关闭网页，否则信息将一直有效。所以，用Session保存的信息很容易丢失。Cookie用来将用户的信息保存到用户机的文件中，这样信息就可以长久的保存。前两种都是传统的保存方式，而ViewState是在微软.Net环境下新推出的一种对象，它其实是一种特殊的Session，不过一般将信息保存在客户端。关于ViewState的用法大家可以参考一些资料，我在《谨慎Asp.net中static变量的用法》一文中也有叙述。
      下面我将以用户名和密码为例介绍如何通过Cookie保存用户的信息。
      因为Cookie是通过计算机上的文件来记录有关信息，所以涉及到对Cookie的操作无外乎读取、赋值和删除。另外，由于Cookie提供了一项有效期的功能，所以还可以对Cookie设置有效期。下面将在DHTML和VS.Net两种环境下分别介绍如何实现Cookie的各种操作。
      一、DHTML环境
      这种环境下我们使用的是传统的JavaScript脚本，通过对页面中各种对象的属性和事件进行操作来完成我们的预期任务。
      1、读取Cookie值
      Cookie值是按照索引存储的，也就是说不同的索引有不同的Cookie值。所以我们就可以将我们想要存储的对象（在这里为用户名）作为索引，读取该存储对象的Cookie值。方法如下：
[html] view plain copy print ?
  1. function GetCookie (name)   
  2. {   
  3.     var arg = name + "=";   
  4.     var alen = arg.length;   
  5.     var clen = window.document.cookie.length;   
  6.     var i = 0;   
  7.     while (i < clen)   
  8.     {   
  9.         var j = i + alen;   
  10.         if (window.document.cookie.substring(i, j) == arg) return getCookieVal (j);   
  11.         i = window.document.cookie.indexOf(" ", i) + 1;   
  12.         if (i == 0)  
  13.             break;   
  14.     }   
  15.     return null;  
  16. }  
  17. function getCookieVal (offset)  
  18. {   
  19.     var endstr = window.document.cookie.indexOf (";", offset);   
  20.     if (endstr == -1)  
  21.         endstr = window.document.cookie.length;   
  22.     return unescape(window.document.cookie.substring(offset, endstr));  
  23. }  
      为什么读取Cookie值还要两个函数来完成？这是因为Cookie值是按照“Cookie名；”+“Cookie值；”+“有效期；”+“路径”的格式来存储的。这将在下文中提到。这样初次读到的Cookie是一连串的以分号分隔的字符串。我们还需要对其进行进一步处理才能提取出我们想要的信息。在上面两个函数中，第一个函数GetCookie用来按索引获取我们想要读取的Cookie的位置，第二个函数getCookieVal用来提取Cookie中我们想要的信息。所以使用时直接调用GetCookie(name)就可以了，其中name是Cookie的索引，也就是名称，或者直接点说就是我们要存储其值的东西。
      2、设置Cookie值
      正如上面所说，Cookie的存取方式有点类似于哈希表，是以名称作为索引存取的。一个Cookie的格式如下：
Cookie名称（作为Cookie的索引便于以后的各种操作）+“=”+Cookie值+“；expires=+有效期+“；path=”+路径+“；domain=”+域+“；secure=”+安全级别
      可以看出每个Cookie实际有6个属性,这些属性恰好构成了一条记录。多条Cookie记录在硬盘中是以集合的方式存取的。也就是说所有Cookie记录构成了类似于一张表的结构。而Cookie又可以有多个集，那时不是就可以理解成一个库哪？这里不去讲解怎么样以表或库的方式读写Cookie记录集，只是讲解基本的Cookie操作。并且我还没有发现真正有把Cookie集合当成表一样的专门操作方法。毕竟，以表的方式理解Cookie集合只是我的一家之言，仅供大家理解上的方便。
      正因为每个Cookie实际上是有多个属性组成的，所以设置Cookie时理所当然地应该设置多个属性值，虽然不是每一个属性都必须填写，但大家至少应该把Cookie名称和Cookie值填上，否则这个Cookie就没有任何意义了。设置一个Cookie值的方法如下：
[html] view plain copy print ?
  1. function SetCookie (name, value)  
  2. {   
  3.     var exp = new Date();   
  4.     exp.setTime(exp.getTime() + (30*24*60*60*1000));  
  5.     window.document.cookie = name + "=" + escape (value) + "; expires=" + exp.toGMTString()+";path=/";  
  6. }  
      其中，name为Cookie的名称，value为Cookie的值。如果还想指定Cookie的有效期，再传入一个时间参数就可以了，不过要注意这里的时间是以毫秒计算的，所以如果要设置日月年等长时间时要进行计算。需要注意的是如果Cookie的名称和值中含有汉字的话，最好事先对其进行编码，否则可能显示结果不会很理想。
　　3、删除Cookie
      这么叫也许并不恰当，因为以下的介绍忠并没有真正的删除Cookie。我们就勉强这么叫吧。上面说每一个Cookie都有一个有效期，过了这个有效期该Cookie就会失效，获取到的Cookie值将为空（null），使用该Cookie的值将会出错。所以如果要删除某个Cookie的话，只要让其过期就可以了。所以删除Cookie的操作就是让其过期的操作：
[html] view plain copy print ?
  1. function DeleteCookie (name)  
  2. {   
  3.     var exp = new Date();   
  4.     exp.setTime (exp.getTime() - 100);   
  5.     var cval = GetCookie (name);   
  6.     window.document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+";path=/";  
  7. }  
      有上述代码也可以看出，删除操作其实就是让某个Cookie的有效期设置为当前时间减去1毫秒，当然会过期了！
      那么如何将上述代码应用到DHTML的开发过程中哪？下面就以记录用户名和密码到Cookie中为例进行讲解。
      为了简单起见，我们只在页面中放置一个用户名文本域、一个密码域、一个按钮和一个复选框。页面的布局代码如下：
[html] view plain copy print ?
  1.     <html>  
  2.     <head>  
  3.     <title>记录用户名和密码到Cookie中</title>  
  4.     </head>  
  5.     <body>  
  6. 请输入用户名：<input type="text"  id = "username" ><br/>  
  7. 请输入密码：<input type="password" id="password">    <input type="checkbox" name = "remember" id="remember"></input>记住密码<br/>  
  8. <input value="记录" type="button" onClick="remember()">    <input value="删除" type="button" onClick="DelCookie()">  
  9. <input type="button" value="显示cookie" onClick="showpassword()">  
  10.     </body>  
  11.     </html>  
      下面就开始完成功能代码的编写。本来用户单击“确定”按钮后要对用户名和密码进行验证，并且进入相关页面，我们在这里换成记录用户名和密码的功能。
      将上述三个Cookie的函数粘贴到html代码的<head>和</head>之间（不要放在<title>和</title>之间），然后在<input value="记录" type="button">中添加一个单击事件处理程序：<input value="记录" type="button" onClick="remember()">。在<head>和</head>之间实现remember()函数：
[html] view plain copy print ?
  1. function remember()  
  2. {  
  3.     if(document.getElementById("remember").checked){  
  4.         SetCookie(document.getElementById("username").value,document.getElementById("password").value);  
  5.         alert("Saved!");  
  6.     }     
  7. }  
      这样就可以在用户单击了“记录”按钮后将用户名和对应的密码记录到Cookie中。
      那么如何在用户输入用户名后自动填入对应的密码哪？这就要在<input id="username" type="text">中添加一个事件处理函数:<input id="username" type="text" οnblur="showpassword()">。然后把showpassword()的定义同样放到<head>和</head>之间：
[html] view plain copy print ?
  1. function showpassword()  
  2. {  
  3.   return GetCookie(document.getElementById("username").value);  
  4. }  
      以上就完成了对特定用户密码的记录。下面我们完成密码的删除部分。在<input value="删除" type="button">中添加一个事件处理函数:<input value="删除" type="button" onClick="DelCookie()">。然后在<head>和</head>之间实现DelCookie()函数：
[html] view plain copy print ?
  1. function DelCookie()  
  2. {  
  3.     DeleteCookie(document.getElementById("username").value);  
  4. }  
      现在大家可以试验一下，看看预期的功能可否实现。如果大家试验过后就会发现，当我们删除掉某个用户的密码后，每次焦点从username中移出时，password中总是显示四个掩码，而不是空，这是为什么哪？如果大家用alert()语句把文本框中的内容输出的话，就会发现那四个掩码其实是“null”这个单词。这就表明其实已经删除了，但我们显示密码时没有排除这种情况。所以在showpassword()函数中应进行判断，非空后再把结果赋给password域：
[html] view plain copy print ?
  1. function showpassword()  
  2. {  
  3.      var p=GetCookie(document.getElementById("username").value);  
  4.      if(p!=null)  
  5.     document.getElementById("password").value= p;  
  6. }  

      好了，大功告成。完整的代码如下所示：

[html] view plain copy print ?
  1. <html>  
  2. <head>  
  3. <title>记录用户名和密码到Cookie中</title>  
  4. </head>  
  5. <body>  
  6. 请输入用户名：<input type="text"  id = "username" onblur="showpassword()"><br/>  
  7. 请输入密码：<input type="password" id="password">    <input type="checkbox" name = "remember" id="remember"></input>记住密码<br/>  
  8. <input value="记录" type="button" onClick="remember()">    <input value="删除" type="button" onClick="DelCookie()">  
  9. <script type="text/javascript">  
  10. function GetCookie (name)   
  11. {   
  12.     var arg = name + "=";   
  13.     var alen = arg.length;   
  14.     var clen = window.document.cookie.length;   
  15.     var i = 0;   
  16.     while (i < clen)   
  17.     {   
  18.         var j = i + alen;   
  19.         if (window.document.cookie.substring(i, j) == arg) return getCookieVal (j);   
  20.         i = window.document.cookie.indexOf(" ", i) + 1;   
  21.         if (i == 0)  
  22.             break;   
  23.     }   
  24.     return null;  
  25. }  
  26. function getCookieVal (offset)  
  27. {   
  28.     var endstr = window.document.cookie.indexOf (";", offset);   
  29.     if (endstr == -1)  
  30.         endstr = window.document.cookie.length;   
  31.     return unescape(window.document.cookie.substring(offset, endstr));  
  32. }  
  33. function SetCookie (name, value)  
  34. {   
  35.     var exp = new Date();   
  36.     exp.setTime(exp.getTime() + (30*24*60*60*1000));  
  37.     window.document.cookie = name + "=" + escape (value) + "; expires=" + exp.toGMTString()+";path=/";  
  38. }  
  39. function DeleteCookie (name)  
  40. {   
  41.     var exp = new Date();   
  42.     exp.setTime (exp.getTime() - 100);   
  43.     var cval = GetCookie (name);   
  44.     window.document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+";path=/";  
  45. }  
  46.   
  47. function DelCookie()  
  48. {  
  49.     DeleteCookie(document.getElementById("username").value);  
  50. }  
  51. function remember()  
  52. {  
  53.     if(document.getElementById("remember").checked){  
  54.         SetCookie(document.getElementById("username").value,document.getElementById("password").value);  
  55.         alert("Saved!");  
  56.     }     
  57. }  
  58. function showpassword()  
  59. {  
  60.      var p=GetCookie(document.getElementById("username").value);  
  61.      if(p!=null)  
  62.     document.getElementById("password").value= p;  
  63. }  
  64. </script>  
  65. </body>  
  66. </html>  

下面是一个php端使用cookie做的一个简单页面计数器

[php] view plain copy print ?
  1. <?php  
  2. session_start();  
  3.   
  4. if(!isset($_COOKIE['kookie']))  
  5. {  
  6.     $pagecount = 0;  
  7.     setcookie("kookie",$pagecount);  
  8.     echo "<center>This is the firest time you hvae accessed this page in this session.</center>";  
  9.     echo "<center> A cookie was sent to you and stored in your computer.</center>";  
  10. }else {  
  11.     $pagecount  = ++$_COOKIE['kookie'];  
  12.     setcookie("kookie",$pagecount,time()-10);  
  13.     setcookie("kookie",$pagecount);  
  14.     echo "<center>View Count :<b> ".$_COOKIE['kookie']."</b><center>\n<br>";  
  15. }  
  16. ?>  
  17. <html>  
  18. <head>  
  19. <title>Page title</title>  
  20. </head>  
  21. <body>  
  22. <center><b>Refresh button will refresh the page and the page count! :-)  
  23. <b></center>  
  24. </body>  
  25. </html>  



wenwenhappy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
从cookies验证用户名和密码_你知道吗？别人是可以通过这种方式知道你登录密码的...
weixin_39805195的博客
12-06 1495
大家好，我是可乐，青春搞怪佛系少年。咱们公众号致力于分享干货、教程、资源和快乐，0花费的享受各种市面上svip的待遇！如今大多数人都会在电脑上浏览各种网站，很多网站都会让你注册登录。但相信很多小伙伴们在登录的时候，都会习惯性的选择保存或者记住密码，可能很多人对这个细节没怎么感到不妥，但其实里面埋藏了重要的上网安全隐患别人可以在你电脑上通过文章中这一步简单操作，就可以知道你的密码了。下面可乐来说一下...
记住密码案例
qq_37651272的博客
04-24 369
记住密码案例 登录页面activity_case_login.xml xml version="1.0" encoding="utf-8"?> android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http:/
【servlet】Cookie存储&获取账号密码信息设计方案
Junnix的博客
12-29 3678
详解Cookie存储&获取账号密码信息 当我们写一个JavaWeb页面，信息的存储&获取是我们关注的第一要素，因为既然是动态页面，就必须有动态页面的样子。 这是我研究了一上午研究出来的存储&获取账号密码信息的一个小途径，希望可以给正在寻找此类问题答案的同学帮助。 用一个例子来分析 要求如图： BUG重现： 由于页面有很多操作按钮，每次我们操作之后，页面或许就不会知道我们的身份导致我们对自己的文章没法执行修改和删除操作。 解决BUG前的分析 那么如何保证每次操作之后系统仍然知道我们的身
怎样将用户名和密码保存到Cookie中？ (html部分)
热门推荐
KylinBL的专栏
03-19 2万+
在网站中,我们经常看到每当我们准备登陆时,网页询问我们是否保存用户名和密码,以便下次登陆时不用再次输入。诸如此类的功能如何实现哪？经过两天的研究，终于有了收获！现将我的经验与大家分享。       在网页中记录用户的信息通常有如下几种方式：Session、Cookie、以及.Net环境下的ViewState等。比较起来，Session将用户的信息暂存在内存中，除非用户关闭网页，否则信息将一直有效
Cookie：使用Cookie实现记住用户的账号和密码
yiguang_820的博客
09-28 2万+
目录： 练习一：java web（jsp）中使用cookie记住用户的账号和密码 练习二：java web（jsp+servert）中使用cookie记住用户的账号和密码 进阶例题：java web中使用cookie记住用户的账号和密码 练习三：jsp使用cookie实现自动登录（在首次登录之后，将登录信息保存到cookie，再次访问的时候，不将登录信息显示在登录栏中，即登录信息空，但是也...
小心！Cookie能够暴露你输入的密码
weixin_45568859的博客
12-06 1930
小心！Cookie能够暴露你输入的密码 我们在上网时，会经常性的登陆某些网站，比如这个： 当你输入好用户名和密码时，会提示你要不要保存此密码。通常大多数人都会将它们保存在本地，也就是保存为了Cookei。当我们下次再打开这个网站时，会发现我上次输入的数据还在， 只需点击连接或者是登陆就可以登陆成功。用起来很方便免去了重新输入、验证的麻烦。 但是 密码框中这些小黑点会变成一串密码， 需要注意的...
记住密码提示框
weixin_44580139的博客
10-30 286
js练习 记住密码提示框 效果图： 代码如下，没有什么要注意的。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0px;...
实现记住密码功能
01-15
在网页应用中，"记住密码"功能是一个常见且重要的特性，它允许用户在登录时选择保存他们的凭据，以便在未来的访问中自动填充，从而提高用户体验。实现这一功能涉及到多个技术层面，包括浏览器存储机制、安全性考虑...
Android实现记住密码功能
08-25
"Android实现记住密码功能" Android实现记住密码功能是Android应用程序中的一项重要功能，旨在提供一种便捷的方式，让用户能够快速登录应用程序，而不需要每次都输入账号和密码。本文将详细介绍如何使用...
SharedPreferences记住密码
05-24
利用SharedPreferences记住密码， SharedPreferences sp = getSharedPreferences("bh", MODE_PRIVATE); Editor editor = sp.edit();//编辑器 editor.putString("username", username.getText().toString()); ...
C#实现记住密码
04-21
在C#编程中，"记住密码"功能是一个常见的用户交互特性，主要目的是为了方便用户在下次登录时无需再次输入他们的密码。实现这个功能涉及到几个关键点，包括数据存储、安全性和用户界面设计。下面我们将详细探讨这些...
记住密码和判断是否进入
01-16
在IT行业中，"记住密码"是一项常见的功能，它允许用户在登录某个应用或网站时保存他们的凭证，以便在下次访问时自动填充，提高用户体验。这个功能通常涉及到浏览器存储、加密安全以及用户隐私等方面的知识。 首先，...
从cookie里获取用户名和密码，保存密码功能
山重水复疑无路
03-20 2482
web框架：spring+hibernate+jQuery HTML里的js代码： $(document).ready(function(){ if($.cookie("rmbUser")=="true"){ $("#pwdcheckbox").attr("checked",true); $("#loginname").val($.cookie("loginname"));
JavaScript操作cookie实现记住用户名密码功能（一）
hsx18787462705的博客
09-15 4057
JavaScript操作cookie实现记住用户名密码功能（一） 由来简述 最近一段时间在使用springboot编写一个简单的小系统，但是写到登录注册时，突然想给登录加上一点小功能，但是写的时候有点模糊，然后向w3school求助了一下，之后自己有在那基础上有一些改动，达到了一个很好的样例，如果觉得好的给个关注，给个赞。 参考链接：https://www.w3school.com.cn/js/js_cookies.asp 主要实现了如下的一些功能： 1、页面加载完检测是否有cookie，有的话，把co
JavaScript 练手小技巧：利用cookie保存登录用户名和密码
九天翔龙的技术博客
03-25 5521
今天刚从会议室出来，就有同学问我如何使用cookie。 我问：你想干嘛？ 答曰：想做一个能保存用户名密码的效果。照着书上敲了一次，但是有问题，没找到原因。 我说：这也太简单了吧。三分钟讲清楚。 一、什么是cookie cookie 是浏览器（客户端）用以存储网站信息的小型数据。小到不能超过4KB。 cookie的数据可以由服务器返回给浏览器，用于存储一些数据，便于下次访问使用。JS可以直接获取或者写入cookie。 二、JS写入或者读取cookie 1. 写入 cookie docume
使用Cookie存储登录数据并且实现用户自动登录
一只未秃顶的不合格程序猿的博客
10-11 4373
Cookie的几点说明：1.单个cookie大小不超过4kb2.同一个域名下cookie的数量一般不超过20个（浏览器不同，会不同）3.cookie用于存储少量不敏感的数据4.cookie可以用来区分不同的客户端（在不登录时候，配合session）
获取cookie中的用户名和密码,并显示
02-19 1万+
jsp页面代码，获取name为"name","password"的cookie,并把其值赋给变量 <% String name=""; String psw=""; String checked=""; Cookie[] cookies=request.getCookies(); if(cookies!=null && cookies.length!=0){
cookie存储多个用户的用户名和密码
qq_59692025的博客
05-05 1015
使用cookie存储多个用户信息，思路是在cookie中存入含有用户信息的json，格式如下{"admin":"123456","admin0":"123456"}，在后端进行处理，返回前端的cookie，在这个位置看到才算存入cookie成功。然后是前端，先拿到userInfo的cookie，这个样子，这个json数据也要保存，之后可以根据用户名作为key，取value。用户名从用户对象数组遍历拿到所有的用户名，当用户名放生改变时，密码重新赋值为json数据[用户名]
mpu6050陀螺仪使用方法开发教程文档.docx
最新发布
07-30
mpu6050陀螺仪使用方法
springboot 记住密码
03-09
Spring Boot是一个用于构建独立的、生产级别的Java应用程序的框架。它简化了Java开发过程，提供了一种快速开发的方式。记住密码是指在用户登录时，可以选择保存密码，下次登录时自动填充密码，而不需要再次输入。 在Spring Boot中实现记住密码功能可以通过以下步骤： 1. 在登录页面添加一个复选框，用于用户选择是否记住密码。 2. 当用户登录成功后，将用户名和密码保存到浏览器的Cookie中。 3. 下次用户再次访问登录页面时，检查是否存在记住密码的Cookie，如果存在，则自动填充用户名和密码。 具体实现步骤如下： 1. 在登录页面的HTML代码中添加一个复选框： ```html <input type="checkbox" name="rememberMe">记住密码 ``` 2. 在登录接口的处理方法中，判断是否选择了记住密码： ```java @PostMapping("/login") public String login(@RequestParam("username") String username, @RequestParam("password") String password, @RequestParam(value = "rememberMe", required = false) boolean rememberMe, HttpServletResponse response) { // 登录逻辑处理 // ... // 如果选择了记住密码，则将用户名和密码保存到Cookie中 if (rememberMe) { Cookie usernameCookie = new Cookie("username", username); Cookie passwordCookie = new Cookie("password", password); // 设置Cookie的有效期，例如7天 usernameCookie.setMaxAge(7 * 24 * 60 * 60); passwordCookie.setMaxAge(7 * 24 * 60 * 60); response.addCookie(usernameCookie); response.addCookie(passwordCookie); } // 返回登录成功页面 // ... } ``` 3. 在登录页面的JavaScript代码中，检查是否存在记住密码的Cookie，并自动填充用户名和密码： ```javascript window.onload = function() { var username = getCookie("username"); var password = getCookie("password"); if (username && password) { document.getElementById("username").value = username; document.getElementById("password").value = password; document.getElementById("rememberMe").checked = true; } } function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值