用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. Python·Jupyter Notebook各种使用方法记录

    标签(空格分隔): Python 一 Jupyter NoteBook的安装 1 新版本Anaconda自带Jupyter 2 老版本Anacodna需自己安装Jupyter 二 更改Jupyter ...

  2. linux系统oracle服务自启动

    终于知道为什么自启动脚本一直无法成功执行,原来都是空格不对惹的祸.具体步骤说明如下: 1.修改dbstart和dbshut脚本 dbstart脚本默认值启动oracle服务,不启动监听服务,如果想在启 ...

  3. 从极大似然估计的角度理解深度学习中loss函数

    从极大似然估计的角度理解深度学习中loss函数 为了理解这一概念,首先回顾下最大似然估计的概念: 最大似然估计常用于利用已知的样本结果,反推最有可能导致这一结果产生的参数值,往往模型结果已经确定,用于 ...

  4. kubernetes系列：（二）、kubernetes部署mysql（单节点）

    使用kubeadm搭建好kubernetes集群后就可以动手部署自己的应用了. 本文用例来自官网,如有需要请参看 kubernetes官网 一.环境说明 kubernetes 1.13.1 docke ...

  5. category与协议的不同

    1,category是针对类进行扩展,而且该类必须有里面的所有成员 协议不同可以选择性实现 2,category是针对一个具体的类实现,其他类没有 协议允许任何类使用,只要实现以后只能通过重写修改 3 ...

  6. Spring meven 配置

    使用maven的仓库化管理,可以更方便有效的控制文件. 在官网下载maven. 官网的地址:http://maven.apache.org/download.cgi  请选择最新的版本下载, 这里我用 ...

  7. R dataframe 去除行号

    原先的行号是这样的:

  8. JSTL教程 [JSP 标准标记库]

    JSTL教程- - JSP 标准标记库(JSP Standard Tag Library,JSTL)是一个实现 Web 应用程序中常见的通用功能的定制标记库集,这些功能包括迭代和条件判断.数据管理格式 ...

  9. solarwind之network Atlas

    1.  连接密码为空,连接到Orion     2.  连接后如下图   3.  直接拖动节点即可进行绘制地图   4.  查看它的相关属性          

  10. CF949A Zebras 构造

    是一道不错的构造题. 我们观察,一个 111 的前后必须都有 000. 那么,我们开一个二维数组 (vector)(vector)(vector),这样每遇到一个 000 就将 000 加入到当前的 ...