jQuery实现的记住帐号密码功能完整示例


Posted in jQuery onAugust 03, 2019

本文实例讲述了jQuery实现的记住帐号密码功能。分享给大家供大家参考,具体如下:

记住密码是每个有帐号登录的网站必备的,现在说一下通过COOKIE实现的记住密码功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>COOKIE</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">
//读取cookie
var user = $.cookie('uu');
var pwd = $.cookie('pp');
$(document).ready(function(){
  // 判断是否存在cookie
  if (user) {
    $("input:text").val(user);
    $("input:password").val(pwd);
    $("#che").html("<input type=\"checkbox\" οnclick=\"uncheck()\" id=\"check1\" checked/>");
  }
});
// 选中记住密码
function check(){
 $("#che").html("<input type=\"checkbox\" οnclick=\"uncheck()\" id=\"check1\"/>");
 // 设置为选中状态
 document.getElementById("check1").checked=true;
 // 创建一个cookie并设置有效时间为 7天
 $.cookie('uu', $("input:text").val(), { expires: 7 });
 $.cookie('pp', $("input:password").val(), { expires: 7 });
}
// 取消记住密码
function uncheck(){
 $("#che").html("<input type=\"checkbox\" οnclick=\"check()\" id=\"check1\"/>");
 // 设置为取消状态
 document.getElementById("check1").checked=false;
 // 删除cookie
 $.cookie('uu','');
 $.cookie('pp','');
}
</script>
<input type="text" name="username" placeholder="帐号"><br/>
<input type="password" name="password" placeholder="密码"><br/>
记住密码:<div id="che"><input type="checkbox" οnclick="check()" id="check1"/></div><br/>
</body>
</html>

jQuery实现的记住帐号密码功能完整示例

只要在表单输入帐号密码,再勾选记住密码,那么你的帐号密码就已经被存入到cookie了,有效期7天。然后你刷新页面,发现帐号密码还在表单中,不会被清空。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery插件之validation插件
Mar 29 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
一段php加密解密的代码
2006/10/09 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Mac 上切换Python多版本
2017/06/17 Python
selenium+python实现自动登录脚本
2018/04/22 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
数控个人求职信范文
2014/02/03 职场文书
三年级评语大全
2014/04/23 职场文书
团队队名口号大全
2014/06/06 职场文书
学风建设演讲稿
2014/09/12 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
黑白记忆观后感
2015/06/18 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
德劲DE1105机评
2022/04/05 无线电