用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. Tomcat 初探（三）多项目部署

    起因 昨天房东找我说最近物价飞涨,要涨我房租,混不下去了,得要求老板涨工资.一大清早就去找老板,老板看了看我,让我发布先两个网站:一个前台网站 frontend,给用户用:一个后台管理网站 backe ...

  2. ubuntu16.04 安装 docker-compose

    下载安装 docker-composecurl -L https://github.com/docker/compose/releases/download/1.15.0/docker-compose ...

  3. 坑人的SQL Server检测数字类型的函数ISNUMERIC

    前几天,遇到一个十分棘手的问题,有同事提出在是字符类型的列中进行起止号计算,大体是这样的 新起号＝上一条止号+1 新止号＝新起号+数量 而在这一列的数据是这样的 库存 CN003?005007 000 ...

  4. my.cnf配置样例

    [mysql] no-auto-rehash port = socket = /data/mysql/data/mysqld.sock [mysqld] user = mysql port = bas ...

  5. 值得尝试的十款 GNOME Shell 扩展

    值得尝试的十款 GNOME Shell 扩展 作者: JACK WALLEN 译者: 核子可乐 | 2016-09-22 17:10   评论: 6 收藏: 1 当 GNOME Shell(即 GNO ...

  6. 《Exception》第八次团队作业：Alpha冲刺（第四天）

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...

  7. node工具是是什么东西

    Node到底是个啥? Node是一个服务器端JavaScript解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅 最近写 ...

  8. js数组的一些骚操作 （用一行代码实现）

    1.扁平化n维数组 1.终极篇 [1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]].flat(3) //[1,2,3,4,5] [1[2,3,[4,5[...]].f ...

  9. rest-framework框架

    rest-framework框架是Django里面非常重要的框架,但提到rest-framework框架就不得不说两种请求方式,那就是CBV和FBV. FBV(function base views) ...

  10. [读书笔记] R语言实战 （二） 创建数据集

    R中的数据结构:标量,向量,数组,数据框,列表 1. 向量:储存数值型,字符型,或者逻辑型数据的一维数组,用c()创建 **  R中没有标量,标量以单元素向量的形式出现 2. 矩阵:二维数组,和向量一 ...