用cookie做前端页面的记住密码

1.首先，写一个登陆的jsp页面，做一个form表单的post请求，地址链接到自己的servlet文件

<form action="${pageContext.request.contextPath}/pictur"method="post"><input type="tel" name="login_name" onkeyup = "value=value.replace(/[^\d]/g,'')"        id="login_name"  placeholder="手机/用户名" maxlength="11" /><input type="password"name="password" id="password" placeholder="请输入密码"           maxlength="16" /><input id="remember" name="remember" type="checkbox">记住密码<input type="button" name="btn" value="登 录" id="btn"/>
</form>

表单提交时判断多选框是否选中

var val = $("#remember").prop("checked");if (val == true) {var remember = $("#remember").val('true');} else {var remember = $("#remember").val('false');}

2.然后写servlet，用户名密码验证，判断是否勾选记住密码，并生成cookie，保存到客户端。

// 封装form表单数据 表单里面的密码String login_name = request.getParameter("login_name");String passworda = request.getParameter("password");String remember = request.getParameter("remember");boolean validPassword = Encryption.validPassword(password, passwords);System.out.println("登录解密是否成功:" + validPassword);PrintWriter out = response.getWriter();System.out.println("呵呵:"+remember);if("true".equals(remember) && validPassword == true){//创建cookie 存放用户名和密码Cookie ckl = new Cookie("remember", remember);ckl.setMaxAge(7*24*60*60);//存放的时间为7天response.addCookie(ckl);Cookie ckl2 = new Cookie("login_name", login_name);ckl2.setMaxAge(60*60);response.addCookie(ckl2);Cookie ckl3 = new Cookie("password", password);ckl3.setMaxAge(60*60);response.addCookie(ckl3);}else{//清除cookie Cookie[] cks = request.getCookies();if(cks != null){for (Cookie c : cks) {c.setMaxAge(0);response.addCookie(c);}}}

3.最后是jsp页面的js代码，实现用户名密码的展示

var cookies = document.cookie.split(';');function getCk(mkey) {for (var i = 0; i < cookies.length; i++) {var kv = cookies[i].split('=');if(kv[0].trim() == mkey){return kv[1].trim();}}return '';}//网页加载完成时触发window.onload = function() {var remember = getCk('remember');var login_name = getCk('login_name');var password = getCk('password');console.log(remember+"----");console.log(login_name+"----");console.log(password+"----");//多选框为true时往文本框中加入已经存在cookie里的用户名和密码if(remember == 'true'){var nameInput = document.getElementById("login_name");var passwordInput = document.getElementById("password");var rememberInput = document.getElementById("remember");rememberInput.checked="checked";nameInput.value = login_name;passwordInput.value = password;}}

把密码存入cookie是有盗号风险的，为了解决这个问题，推荐将密码用md5加密，这样就能保证密码的安全了。欢迎大家一起研究，此外，希望大家能手敲一遍，记忆更深刻一些，不希望被复制粘贴，谢谢大家。

用cookie做前端页面的记住密码相关推荐

【浅谈】前端禁止浏览器记住密码
[浅谈]前端禁止浏览器记住密码浏览器记住是基于type='password',将password改为text,采用文本输入将v-model的绑定方式改为这种输入,input框中显示的是经过转换的* ...
前端修改浏览器记住密码时输入框背景样式
浏览器自带样式正常情况下,浏览器记住密码时会自动新增背景样式覆盖样式前端修改浏览器记住密码时输入框背景样式 input:-webkit-autofill, input:-webkit-autof ...
EF做后台登录+首页(记住密码)，增删改查
数据库脚本 USE [InfoManagerSystem] GO /****** Object: Table [dbo].[User] Script Date: 10/15/2019 08:14:50 ...
登录页面中记住密码操作的实现
1. 思路访问:前端login.jsp---->后台:如果上次用户选择勾选记住密码,自动填充账号和密码;否则,不填. 如何判断上次是否记住密码?` 第一次登录成功,去判断是否 ...
EF做后台登录（记住密码）首页
1.数据库设计 CREATE TABLE [dbo].[AdminUser]([Id] [int] IDENTITY(1,1) NOT NULL,[Name] [varchar](50) NULL,[ ...
vue登录页面实现记住密码的操作
首先看一下思路思路: ①点击登录按钮→调用接口→如果调用成功,判断是否选择记住密码→如果选择记住密码,则把用户名与密码存到cookie中,否则清除cookie ②点击返回登录页→在登录页create ...
【Android】_UI设计_登录页面（记住密码）
目标: Android记住密码和自动登录界面的实现(SharedPreferences),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 登录页面设计(记住密码版) (一) SharedPrefe ...
html5登录页面自动记住密码,使用HTML5中的localStorage实现记住密码功能
这篇文章主要介绍了html5超简单的localStorage实现记住密码的功能实现,非常具有实用价值,需要的朋友可以参考下 HTML5 提供了两种在客户端存储数据的新方法:localStorage - ...
java web登录页面上记住密码
利用cookie编程 login.jsp 页面上的java代码: <% String flag = (String)session.getAttribute("flag")= ...

用cookie做前端页面的记住密码

用cookie做前端页面的记住密码相关推荐

最新文章

热门文章