之前在一次面试过程中,被问到前后端如何实现记住密码功能,所以自己也试着做,这是纯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. python爬虫模块之HTML解析模块

    这个就比较简单了没有什么好强调的,如果返回的json 就是直接按照键值取,如果是网页就是用lxml模块的html进行xpath解析. from lxml import html import json ...

  2. 【模板】BZOJ 1692:队列变换—后缀数组 Suffix Array

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1692 题意: 给出一个长度为N的字符串,每次可以从串头或串尾取一个字符,添加到新串中,使新串 ...

  3. 剑指offer中数据结构与算法部分学习

    2.3.4 树 遍历:前中后序,宽度优先. 二叉树的特例:二叉搜索树.堆(最大堆和最小堆,用于找最值).红黑树(c++ STL中的很多数据结果就是基于这实现的): 题7-重建二叉树:递归,设置四个位点 ...

  4. 【VIPM技巧】多版本LabVIEW无法连接问题

    前言 今天小编突然用到一个Toolkit,遂去VIPM上搜索,虽然可以找到但是无法连接成功LabVIEW,配置好一阵才解决.这里记录一下整个思路,供需要的人参考 问题记录 VIMP连接超时 问题解决 ...

  5. MiCode 40: 找小“3”

    题目链接 这道题真的是zjb恶心, 看其起来像是个数位dp, 然而我并不会数位dp.然后就xjb乱写了个雷类似于动态规划的玩意, 然后调出了\(9\times 9 = 81\)种Bug, 终于过了. ...

  6. hive-group by的时候把两个字段变成map

    源表结构: pcgid               string mobilegid           string value               double 测试数据如下: p1 m1 ...

  7. recv函数的MSG_PEEK标志介绍

    考虑下面的场景,server向client发送数据"_META_DATA_\r\n_USER_DATA_",要求"\r\n"之前的数据_META_DATA_在第 ...

  8. 【转载】viewLoad、viewDidLoad的一些事

    viewLoad和viewDidLoad都可以用来在视图载入的时候,初始化一些内容 viewDidLoad此方法只有当view从nib文件初始化的时候才被调用.viewDidLoad用于初始化,加载时 ...

  9. git-全家桶

    关于git,网上一片赞美之声,我就不多说啥了,用过才知道,多好. 没有了解过的朋友,可以去大神廖雪峰传送门看看,我就是通过那里学会的基础,再次感谢大神无私的奉献!!! 下面分四个章节: 基础操作(其实 ...

  10. CentOS7单机部署lamp环境和apache虚拟主机

    (1)apache介绍 apache : httpd.apache.org 软件包:httpd 端口服务:80/tcp(http) 443/tcp(https,http+ssl) 配置文件: /etc ...