用js实现记住密码功能，但是前端记住密码不安全，最好还是不要用。我感觉这个记住密码应该是通过与后台建立一个会话来实现。

这个效果的测试地址在：http://ofoyou.com/blog/rePassword.html

<!DOCTYPE HTML>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>js COOKIE 记住帐号或密码</title>

    <script type="text/javascript">

    //点击登录时触发客户端事件

    function SetPwdAndChk() {

        //取用户名

        var usr = document.getElementById('txtUserName').value;

        alert(usr);

        //将最后一个用户信息写入到Cookie

        SetLastUser(usr);

        //如果记住密码选项被选中

        if (document.getElementById('chkRememberPwd').checked == true) {

            //取密码值

            var pwd = document.getElementById('txtPassword').value;

            alert(pwd);

            var expdate = new Date();

            expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));

            //将用户名和密码写入到Cookie

            SetCookie(usr, pwd, expdate);

        } else {

            //如果没有选中记住密码,则立即过期

            ResetCookie();

        }

    }

    function SetLastUser(usr) {

        var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";

        var expdate = new Date();

        //当前时间加上两周的时间

        expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));

        SetCookie(id, usr, expdate);

    }

    //用户名失去焦点时调用该方法

    function GetPwdAndChk() {

        var usr = document.getElementById('txtUserName').value;

        var pwd = GetCookie(usr);

        if (pwd != null) {

            document.getElementById('chkRememberPwd').checked = true;

            document.getElementById('txtPassword').value = pwd;

        } else {

            document.getElementById('chkRememberPwd').checked = false;

            document.getElementById('txtPassword').value = "";

        }

    }

    //取Cookie的值

    function GetCookie(name) {

        var arg = name + "=";

        var alen = arg.length;

        var clen = document.cookie.length;

        var i = 0;

        while (i < clen) {

            var j = i + alen;

            //alert(j);

            if (document.cookie.substring(i, j) == arg) return getCookieVal(j);

            i = document.cookie.indexOf(" ", i) + 1;

            if (i == 0) break;

        }

        return null;

    }

    function getCookieVal(offset) {

        var endstr = document.cookie.indexOf(";", offset);

        if (endstr == -1) endstr = document.cookie.length;

        return unescape(document.cookie.substring(offset, endstr));

    }

    //写入到Cookie

    function SetCookie(name, value, expires) {

        var argv = SetCookie.arguments;

        //本例中length = 3

        var argc = SetCookie.arguments.length;

        var expires = (argc > 2) ? argv[2] : null;

        var path = (argc > 3) ? argv[3] : null;

        var domain = (argc > 4) ? argv[4] : null;

        var secure = (argc > 5) ? argv[5] : false;

        document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");

    }

    function ResetCookie() {

        var usr = document.getElementById('txtUserName').value;

        var expdate = new Date();

        SetCookie(usr, null, expdate);

    }

    </script>

</head>

<body>

    <form id="form1">

        <div>

            用户名:

            <input type="text" id="txtUserName" onblur="GetPwdAndChk()">

            <br> 密码：

            <input type="password" id="txtPassword">

            <input type="checkbox" id="chkRememberPwd" />记住密码

            <br>

            <input type="button" OnClick="SetPwdAndChk()" value="进入" />

        </div>

    </form>

</body>

</html>

JavaScript实现记住密码功能的更多相关文章

  1. java实现记住密码功能(利用cookie)

    <br> <input type="text" id="userName" name="userName" value=& ...

  2. 通过sharedpreferences实现记住密码功能

    通过sharedpreferences实现记住密码功能

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

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  4. cookie记住密码功能

    很多门户网站都提供了记住密码功能,虽然现在的浏览器都已经提供了相应的记住密码功能 效果就是你每次进入登录页面后就不需要再进行用户名和密码的输入: 记住密码功能基本都是使用cookie来进行实现的,因此 ...

  5. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  6. android: SharedPreferences实现记住密码功能

    既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...

  7. vue项目实现记住密码功能

     一.谷歌浏览的残留问题 现在很多的网站都有一个需求是记住密码这个功能,为的是避免用户下次登录的时候繁琐的输入过程. 像是一些主流的浏览器(比如Chrome)都有了这个功能,而且如果你登录了Chrom ...

  8. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

  9. js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,代码如下: //设置cookie var passKey = '4c05c54d952b11e691d76c0b843ea7f9'; function setCookie( ...

随机推荐

  1. 9.自己实现linux中的tree

    运行效果: 代码: #include <stdio.h> #include <unistd.h> #include <string.h> #include < ...

  2. js获取浏览器缩放比例

    前几天在做项目的时候遇到浏览器缩放比例不为100%时,出来的页面不正常,于是找到了方法获取其比例来通知用户 function detectZoom (){ , screen = window.scre ...

  3. UVa 11549 Open Credit System

    题意:给出n个数,找出两个整数a[i],a[j](i < j),使得a[i] - a[j]尽量大 从小到大枚举j,在这个过程中维护a[i]的最大值 maxai晚于ans更新, 可以看这个例子 1 ...

  4. 响应式网页设计：互联网web产品RWD概念

    RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...

  5. How an Event Enters a Cocoa Application

    How an Event Enters a Cocoa Application An event is a low-level record of a user action that is usua ...

  6. Unity 默认进入的scenes

    1,如果有多个场景,那么第一个场景要放在最上边,(其他的也要加) 2,如果不添加,那么Unity会把当前打开的场景添加进来. 3,切换场景的代码 using UnityEngine.SceneMana ...

  7. spring使用注解开发

    1.准备工作(1)导入common-annotations.jar(2)导入schema文件 文件名为spring-context-2.5.xsd(3)在xml的beans节点中配置 service层 ...

  8. vue封装http请求

    import axios from 'axios' import isObject from 'lodash/isObject' const http = function (api, data = ...

  9. web前端项目规范

    项目目录规范 . ├─ css ├─ component ├─ img ├─ js ├─ page ├─ test ├─ package.json ├─ README.md css 存放样式类文件,且 ...

  10. 小学生都能学会的python(编码 and 字符串)

    小学生都能学会的python(编码 and 字符串) 一,编码 最早的计算机编码是ASCII. 有英文+数字+特殊字符 8bit => 1byte 没有中文, 后面的编码必须兼容ASCII    ...