用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. Java基础之对象序列化

    1. 什么是Java对象序列化 Java平台允许我们在内存中创建可复用的Java对象,但一般情况下,只有当JVM处于运行时,这些对象才可能存在,即,这些对象的生命周期不会比JVM的生命周期更长.但在现 ...

  2. 一种比较高级的方法也可以修改windows为默认启动系统

    运行: sudo mv /etc/grub.d/30_os-prober /etc/grub.d/06_os-probersudo update-grub

  3. HD-ACM算法专攻系列（22）——Max Sum

    问题描述: AC源码: 此题考察动态规划,解题思路:遍历(但有技巧),在于当前i各之和为负数时,直接选择以第i+1个为开头,在于当前i各之和为正数时,第i个可以不用作为开头(因为前i+1个之和一定大于 ...

  4. BZOJ2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理)

    2440: [中山市选2011]完全平方数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 4920  Solved: 2389[Submit][Sta ...

  5. JavaScript DOM编程艺术（第2版）学习笔记1（1~4章）

    第一章 一些基本概念 HTML(超文本标记语言),构建网页的静态结构,由一系列的DOM组成: CSS(层叠样式表),给网页各部分结构添加样式: JavaScript,通过获取DOM给静态结构加上动作, ...

  6. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  7. DOM基础知识（概念、节点树、事件、Document）

    1.   DOM概念 全称为 Document Object Model,译为文档对象模型 D:文档 - DOM将HTML页面解析为一个文档 —> document对象 O:对象 - DOM将H ...

  8. Unity坐标系 左手坐标系 图

    x轴:从左指向右 y轴:从下指向上 z轴:指向屏幕里的是左手坐标系,指向屏幕外的是右手坐标系 记忆小技巧:都是X轴朝右,Y轴向上,跟平时画坐标一模一样,区别只是Z的朝向.你用手试一下就知道了,当大拇指 ...

  9. EasyUI——DataGrid的自定义单元格点击事件

    1.当点击的单元格需要传递参数,并且传递的是row的值时,需要进行转义 function initCompareTable(){ $("#deviceCompareTable"). ...

  10. web前后端安全问题

    1. 安全问题主要可以理解为以下两方面: 私密性:资源不被非法窃取和利用,只有在授权情况下才可以使用: 可靠性:资料不会丢失.损坏及篡改: 2. web安全的层面 代码层面:写代码时保证代码是安全的, ...