`

cookie示例：登陆页面中的记住密码功能

HTMLJavaScriptXHTML浏览器Go 
阅读更多

CONTENT
    login.html
    welcome.html
    cookie.js
    common.js

 

login.html

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>login</title>  
  6. <script type="text/javascript" src="cookie.js"></script>  
  7. <script type="text/javascript" src="common.js"></script>  
  8. </head>  
  9. <body>  
  10. <form action="">  
  11. <p>  
  12.     <span>UserName:</span>  
  13.     <input id="userName" type="text" value=""/></p>  
  14. <p>  
  15.     <span>Password:</span>  
  16.     <input id="password" type="password" value=""/></p>  
  17. <p>  
  18.     <span style="font-size:12px; color:blue;">记住密码</span>  
  19.     <input id="saveCookie" type="checkbox" value="" /></p>  
  20. <p>  
  21.     <input id="submit" type="button" value="GO" />  
  22. </p>  
  23. </form>  
  24. </body>  
  25. </html>   
<!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>login</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;">记住密码</span>
    <input id="saveCookie" type="checkbox" value="" /></p>
<p>
    <input id="submit" type="button" value="GO" />
</p>
</form>
</body>
</html>

 

welcome.html

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>welcome</title>  
  6. </head>  
  7. <body>  
  8. <h1>Welcome!</h1>  
  9. <a href="login.html">点击返回登陆框</a>  
  10. </body>  
  11. </html>   
<!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>welcome</title>
</head>
<body>
<h1>Welcome!</h1>
<a href="login.html">点击返回登陆框</a>
</body>
</html>

 

cookie.js

Js代码 复制代码
  1. //新建cookie。   
  2. //hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。   
  3. function setCookie(name,value,hours,path){   
  4.     var name = escape(name);   
  5.     var value = escape(value);   
  6.     var expires = new Date();   
  7.     expires.setTime(expires.getTime() + hours*3600000);   
  8.     path = path == "" ? "" : ";path=" + path;   
  9.     _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();   
  10.     document.cookie = name + "=" + value + _expires + path;   
  11. }   
  12. //获取cookie值   
  13. function getCookieValue(name){   
  14.     var name = escape(name);   
  15.     //读cookie属性，这将返回文档的所有cookie   
  16.     var allcookies = document.cookie;          
  17.     //查找名为name的cookie的开始位置   
  18.     name += "=";   
  19.     var pos = allcookies.indexOf(name);       
  20.     //如果找到了具有该名字的cookie，那么提取并使用它的值   
  21.     if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败   
  22.         var start = pos + name.length;                  //cookie值开始的位置   
  23.         var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置   
  24.         if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie   
  25.         var value = allcookies.substring(start,end);  //提取cookie的值   
  26.         return unescape(value);                           //对它解码         
  27.         }      
  28.     else return "";                                             //搜索失败，返回空字符串   
  29. }   
  30. //删除cookie   
  31. function deleteCookie(name,path){   
  32.     var name = escape(name);   
  33.     var expires = new Date(0);   
  34.     path = path == "" ? "" : ";path=" + path;   
  35.     document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;   
  36. }  
//新建cookie。
//hours为空字符串时,cookie的生存期至浏览器会话结束。hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。
function setCookie(name,value,hours,path){
    var name = escape(name);
    var value = escape(value);
    var expires = new Date();
    expires.setTime(expires.getTime() + hours*3600000);
    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;
}

 

common.js

Js代码 复制代码
  1. function $(objStr){return document.getElementById(objStr);}   
  2. window.onload = function(){   
  3.     //分析cookie值，显示上次的登陆信息   
  4.     var userNameValue = getCookieValue("userName");   
  5.     $("userName").value = userNameValue;   
  6.     var passwordValue = getCookieValue("password");   
  7.     $("password").value = passwordValue;       
  8.     //写入点击事件   
  9.     $("submit").onclick = function()   
  10.     {   
  11.         var userNameValue = $("userName").value;   
  12.         var passwordValue = $("password").value;   
  13.         //服务器验证（模拟）       
  14.         var isAdmin = userNameValue == "admin" && passwordValue =="123456";   
  15.         var isUserA = userNameValue == "userA" && passwordValue =="userA";   
  16.         var isMatched = isAdmin || isUserA;   
  17.         if(isMatched){   
  18.             if( $("saveCookie").checked){     
  19.                 setCookie("userName",$("userName").value,24,"/");   
  20.                 setCookie("password",$("password").value,24,"/");   
  21.             }       
  22.             alert("登陆成功,欢迎你," + userNameValue + "!");   
  23.             self.location.replace("welcome.html");   
  24.         }   
  25.         else alert("用户名或密码错误，请重新输入！");       
  26.     }   
  27. }  
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 == "admin" && passwordValue =="123456";
        var isUserA = userNameValue == "userA" && passwordValue =="userA";
        var isMatched = isAdmin || isUserA;
        if(isMatched){
            if( $("saveCookie").checked){  
                setCookie("userName",$("userName").value,24,"/");
                setCookie("password",$("password").value,24,"/");
            }    
            alert("登陆成功,欢迎你," + userNameValue + "!");
            self.location.replace("welcome.html");
        }
        else alert("用户名或密码错误，请重新输入！");    
    }
}

 

分享到：
| spring整合hibernate关于session的管理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaWeb 中Cookie实现记住密码的功能示例

    下面我们将深入探讨Cookie的工作原理、优势以及如何在JavaWeb中利用它来实现记住密码的功能。 **一、什么是Cookie** Cookie是由服务器发送到用户的浏览器并存储在本地硬盘上的小型文本文件。当用户再次访问同一...

    Cookie记住用户名密码

    在网页应用中，"Cookie记住用户名密码"是一个常见的功能，它允许用户在访问网站时选择保存他们的登录信息，以便下次访问时自动填充，提供便捷的用户体验。这个功能主要依赖于JavaScript和Cookie技术来实现，无需复杂...

    js用cookie记住密码实例

    在网页应用中，为了提升用户体验，有时我们需要实现“记住密码”功能，这就是利用JavaScript来操作Cookie的一种常见应用场景。 Cookie是由服务器端设置，并存储在用户浏览器上的一小段文本数据。它主要用于存储用户...

    JS读取cookie（记住账号密码）

    接下来，我们将详细解析这一过程，包括cookie的基本概念、如何设置和获取cookie以及如何在实际应用中实现记住密码的功能。 ### Cookie基本概念 Cookie是一种小型文本数据，它存储于用户的本地浏览器中，由服务器...

    vue项目实现记住密码到cookie功能示例(附源码)

    本文介绍了vue项目实现记住密码到cookie功能示例，分享给大家，具体如下： 登陆页面 实现功能： 1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内 2.不勾选，点登陆时候则清空之前...

    通过cookie记住密码-HTML样例源码

    在网页开发中，用户登录体验的一个重要环节是“记住密码”功能。这个功能允许用户在一次登录后，下次访问同一网站时自动填充用户名和密码，从而简化登录过程。本示例源码着重讲解如何利用HTML配合Cookie技术实现这一...

    Cookie实现记住密码及解决中文乱码

    在Web开发中，"Cookie实现记住密码及解决中文乱码"是常见的用户交互功能，它涉及到客户端和服务器端的数据交换。下面将详细讲解这个主题。 首先，Cookie是Web服务器发送到用户浏览器并存储的一小块数据，用于在多次...

    web记住密码

    在Web开发中，“记住密码”功能是一个常见的用户友好特性，它允许用户在登录后选择是否保存他们的凭据以便下次自动填充。这个简单的示例可能是用Java实现的，因为标签指明了与Java相关。下面我们将深入探讨这个话题...

    jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    本文将详细介绍如何使用`jquery.cookie.js`实现记住密码功能，并讲解其核心概念和用法。 首先，Cookie是一种存储在用户浏览器中的小型文本文件，用于在用户与网站交互时保存数据。它允许网站在用户下次访问时识别...

    使用Cookie记录用户名和密码.

    ### 使用Cookie记录用户名和密码：深入解析与实践 在现代Web开发中，用户认证与会话管理是构建安全且用户体验友好的网站的关键组成部分。其中，使用Cookie存储用户名和密码是一种常见的做法，尤其在用户选择“记住...

    jQuery实现的记住帐号密码功能完整示例

    4. **Cookie读取：** 当页面加载时，通过$.cookie()读取之前存储的Cookie信息，并自动填充到对应的文本框和密码框中。 5. **取消记忆功能：** 用户点击取消记住密码时，清除相应的Cookie信息，使帐号密码不被自动...

    利用cookie实现三天免登陆示例（mvc分层模式）.rar

    在Web开发中，为了提供更好的用户体验，经常需要实现“记住我”或“三天免登陆”的功能。本示例是基于MVC（Model-View-Controller）分层模式，利用Cookie技术来实现用户登录后三天内自动免登陆的效果。 MVC模式是一...

    JavaScript使用cookie实现记住账号密码功能

    - 如果用户未选择"记住密码"，则不设置密码的Cookie，或者立即删除已存在的密码Cookie。 - 当页面加载时（如`window.onload`事件触发），检查是否存在用户名的Cookie。如果有，自动填充用户名字段，并检查是否还有...

    php使用cookie实现记住用户名和密码实现代码

    总结一下，使用Cookie来记住用户的用户名和密码在Web开发中是一个常见的需求，其基本原理和操作都非常简单。然而，实现这个功能需要考虑到安全性问题，需要确保敏感信息的加密存储，以及定时清理过期的Cookie，从而...

    asp.net 记住密码 自动登录

    在ASP.NET开发中，"记住密码"和"自动登录"功能是提高用户体验的重要特性，尤其在用户频繁访问网站时。本教程将详细讲解如何利用Visual Studio 2010实现这些功能。 首先，我们需要理解ASP.NET的身份验证机制。默认...

    SpringBoot中使用Cookie实现记住登录的示例代码

    SpringBoot 中使用 Cookie 实现记住登录的示例代码 在本文中，我们将详细介绍如何使用 Cookie 在 SpringBoot 中实现记住登录的功能。 Cookie 是一种储存在用户本地终端上的数据，用于辨别用户身份，进行 Session ...

    Vue+element+cookie记住密码功能的简单实现方法

    总之，实现Vue+Element+Cookie的记住密码功能，需要理解Vue.js的响应式数据绑定、事件处理，以及如何使用Element UI构建表单，同时还需要掌握Cookie管理和加密算法。通过这些技术，我们可以为用户提供一个便捷且安全...

    asp.net 用户登陆 示例

    本示例主要展示了如何使用C#编程语言在ASP.NET框架下实现一个用户登录功能，确保用户身份的安全验证，并与数据库进行交互，判断输入的用户名和密码是否存在于数据库中。 首先，我们需要创建一个用户登录页面（Login...

Magicbox
Global site tag (gtag.js) - Google Analytics