js中记住密码功能(在前端实现)

直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式

Jsp代码:

<form class="am-form tpl-form-line-form" id="loginForm"
action="<c:url value='/user_login.action'/>" method="post">
<div class="am-form-group">
<input type="text" class="tpl-form-input" name="username"
id="username" placeholder="请输入账号" autofocus>
</div>
<div class="am-form-group">
<input type="password" class="tpl-form-input" name="password"
id="password" placeholder="请输入密码">
</div>
<div class="am-form-group tpl-login-remember-me">
<input id="remember-me" type="checkbox"> <label
for="remember-me"> 记住密码 </label>
</div>
<div class="am-form-group tpl-login-remember-me">
<label for="remember-me"> 合作账号登录: </label> <a
href="http://www.qq.com/"
class="am-icon-qq am-icon-btn am-primary"></a> <a
href="https://wx.qq.com/"
class="am-icon-weixin am-icon-btn am-success"></a> <a
href="http://weibo.com/login.php"
class="am-icon-weibo am-icon-btn am-danger"></a>
</div>
<div class="am-form-group"> <button type="submit"
class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">登录</button> </div>
</form>

Js代码:

<script>
// 得到cookie
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1)
c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
} // 删除cookie
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires="
+ exp.toGMTString();
} // 设置cookie
function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name
+ "="
+ escape(value)
+ ((expiredays == null) ? "" : ";expires="
+ exdate.toGMTString());
} // 判断复选框是否选中
function isChecked(bool) {
if (bool) {
var password = $("#password").val();
setCookie("password", password, 10);
} else {
delCookie("password");
}
} $(function() {
// 设置复选框点击事件
$("#remember-me").click(function() {
var bool = $("#remember-me").prop("checked");
isChecked(bool);
}); /*Map<String(Cookie名称),Cookie(Cookie本身)>*/
// 获取cookie中的用户名
var username = window.decodeURI("${cookie.username.value}");
if ("${requestScope.user.username}") {
username = "${requestScope.user.username}";
}
$("#username").val(username); // 获取cookie中的密码
var password = getCookie("password");
if ("${requestScope.user.password}") {
password = "${requestScope.user.password}";
}
$("#password").val(password); // 密码框加载完毕就要判断复选框
var bool = $("#remember-me").prop("checked");
isChecked(bool);
});
</script>

参考教程:w3school的js操作cookie教程

js中记住密码功能的更多相关文章

  1. JavaScript实现记住密码功能

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

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

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

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

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

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

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

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

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

  6. cookie实现记住密码功能

    之前在一次面试过程中,被问到前后端如何实现记住密码功能,所以自己也试着做,这是纯js做的. 一.实现思路 1.前端页面,自己简单写了一个页面,如下图,不喜勿喷 2.主要有三个函数 setCookie( ...

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

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

  8. android: SharedPreferences实现记住密码功能

    既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...

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

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

随机推荐

  1. mybatis foreach 遍历list中的坑

    将jdbc改写为mybatis时,传入的条件为list使用到的标签是<where> .<choose>.<when>.<if>.<foreach& ...

  2. python 文件读写时用open还是codecs.open

    当我面有数据需要保存时,第一时间一般会想到写到一个txt文件中,当然,数据量比较大的时候还是写到数据库比较方便管理,需要进行网络传输时要序列化,json化.下面主要整理一下平时用的最多的写入到文件中, ...

  3. 补码的来源以及为什么byte的最小值是-128

    1.        有符号数和无符号数 我们的实数分为正数和负数和0三部分 Byte数据类型一共有8位,如果是无符号数,最大可以表示的数为11111111 = 256 -1 = 255 无符号数代指不 ...

  4. java中的\b是什么意思?

    java中有2个地方有\b,一个是特殊字符\b,另一个是在正则表达式中表示边界的意思. 我们这里只讨论特殊字符\b 我这里一共接受到几种解释: 1.退格符相当于键盘上的Backspace符号 back ...

  5. 20165326 java实验四

    20165326实验四-Android程序设计 一:Android Stuidio的安装测试 1.安装Android Stuidio 具体跟着教程走就行主要是配置的时候要选择下载SDK或手动配置,详细 ...

  6. 非常好的开源C项目tinyhttpd(500行代码)

    编译命令 gcc -W -Wall -lpthread -o httpd httpd.c 源码 #include <stdio.h> #include <sys/socket.h&g ...

  7. ArcGIS 按多边形区域统计栅格影像的一些信息

    在使用ArcGIS对栅格影像进行分析时,难免要进行一些统计类的分析.如统计框选区域的像素的个数,面积.均值等内容. 下面给出使用“Spatial Analyst Tools -- > Zonal ...

  8. .net webapi跨域方法整理

    方法一 在Web.Config里面加上了配置信息: <httpProtocol> <customHeaders> <add name="Access-Contr ...

  9. 隔离级别简介 (mysql)

    隔离级别:一个事务必须与由其他事务进行的资源或数据更改相隔离的程度.隔离级别从允许的并发副作用(例如,脏读或虚拟读取)的角度进行描述. 定义 编辑 事务指定一个隔离级别,该隔离级别定义一个事务必须与由 ...

  10. postgresql安装与启动(mac os)

    转自https://blog.csdn.net/kmust20093211/article/details/44359053 --------数据库的安装与创建----------- 安装 brew  ...