之前在一次面试过程中,被问到前后端如何实现记住密码功能,所以自己也试着做,这是纯js做的。

一、实现思路

1.前端页面,自己简单写了一个页面,如下图,不喜勿喷

2.主要有三个函数

  • setCookie(设置cookie)
  • getCookie((取cookie)
  • delCookie(删除cookie)

3.用户在页面第一次填写用户名和密码之后,点击提交,提交的时候,判断记住密码复选框是否被选中,如果是选中,则调用setCookie设置cookie,否则就调用delCookie清楚cookie。
用户第二次进入页面的时候,如果第一次是选中记住密码复选框,则会在页面加载完成之后,就调用getCookie去取cookie,如果cookie存在就从cookie中取出用户名和密码填充到输入框中。如果cookie不存在,就将输入框清空。
如果想要完整代码,请访问我的github.
如果觉得还可以,start一下呗,谢谢。

二、遇到的问题

  • chrome浏览器下不支持js操作cookie
    解决:自己一般使用的是chrome,所以根本不知道,结果百度之后,说将其部署到服务器上可解决这个问题
  • 在将项目部署到tomcat服务器上,访问出现404错误
    解决:之前自己都是将文件放在webapps目录下,这次不行,就将其放在ROOT目录下
  • 部署成功之后,在浏览器中调试,只能存cookie,不能取cookie
    解决:自己将放在ROOT目录下的文件,放在Sublime Text编辑器中编辑,在浏览器中访问的时候,刷新页面出现412错误,针对这个问题,可能是浏览器卡顿问题
    后来重启浏览器就没问题了。然后我测试的时候,打印getCookie的值还是空,后来我将ROOT目录下的文件删除了,重新放了一份,重启tomcat,就ok了。

参考:
https://www.jianshu.com/p/fd6a16c8dfa2
https://www.jianshu.com/p/b5a9b8d74d38

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

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

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

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

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

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

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

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

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

  5. cookie记住密码功能

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

  6. 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名!

    // 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名! var username = document.getElementById("username&quo ...

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

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

  8. js中记住密码功能

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

  9. JavaScript实现记住密码功能

    用js实现记住密码功能,但是前端记住密码不安全,最好还是不要用.我感觉这个记住密码应该是通过与后台建立一个会话来实现. 这个效果的测试地址在:http://ofoyou.com/blog/rePass ...

随机推荐

  1. 用__builtin_return_address获得程序运行栈情况【转】

    转自:http://blog.csdn.net/vpwork/article/details/7680102 %pF versatile_init+0x0/0x110 %pf versatile_in ...

  2. 更新T1表,要添加一个条件A,但T1表没有A字段

    可以这样 如果T2表有A字段,T1.T2表有共同字段B,可以通过T2表A字段为条件查得B字段 再用B字段为条件去更新T1表 update T1 set C = '1' where B in(selec ...

  3. goreplay HTTP-HTTPS流量复制工具

    goreplay相比tcpcopy只能复制HTTP和HTTPS的流量 goreplay编译很麻烦,就直接使用编译好的版本 gor_0.10.1_x64.tar.gz 支持centos5,测试的是cen ...

  4. ltsdangerous加密解密

    前言 在做QQ第三方登录时,用户跳转到QQ登录界面登录成功后,会在URL返回一个code参数.前端把code发送给后端.后端收到后,会查询出openid.然后判断openid是否存在,如果存在就可以绑 ...

  5. linux命令(41):watch命令

    watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行.在Linux下,watch是周期性的执行下个 ...

  6. AtomicReference 和 volatile 的区别

    顾名思义,就是不会被打断!!!!!! https://www.cnblogs.com/lpthread/p/3909231.html java.util.concurrent.atomic工具包,支持 ...

  7. node-session

    session cookie 虽然很方便,但是使用 cookie 有一个很大的弊端,cookie 中的所有数据在客户端就可以被修改,数据非常容易被伪造,那么一些重要的数据就不能存放在 cookie 中 ...

  8. Supervisor-类unix系统下的进程控制工具

    如果你的英文足够好,请看官网的文档:http://supervisord.org/introduction.html 简介: Supervisor 类unix系统下的进程控制工具. 特性: 1.配置简 ...

  9. 1.Spark Streaming另类实验与 Spark Streaming本质解析

    1 Spark源码定制选择从Spark Streaming入手  我们从第一课就选择Spark子框架中的SparkStreaming. 那么,我们为什么要选择从SparkStreaming入手开始我们 ...

  10. PTA L1-020 帅到没朋友 团体程序设计天梯赛-练习集

    L1-020 帅到没朋友(20 分)   当芸芸众生忙着在朋友圈中发照片的时候,总有一些人因为太帅而没有朋友.本题就要求你找出那些帅到没有朋友的人. 输入格式: 输入第一行给出一个正整数N(≤),是已 ...