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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery实现弹幕特效
Nov 29 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
新版PHP将向Java靠拢
2006/10/09 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
php中错误处理操作实例分析
2019/08/23 PHP
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Flask之flask-script模块使用
2018/07/26 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
收银员岗位职责
2014/02/07 职场文书
技能比赛获奖感言
2014/02/14 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
委托培训协议书
2014/11/17 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书