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实现键盘回车搜索功能
Jul 25 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
第十四节 命名空间 [14]
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
师德个人剖析材料
2014/02/02 职场文书
年终总结会主持词
2014/03/25 职场文书
推广普通话演讲稿
2014/05/23 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
政风行风评议心得体会
2014/10/21 职场文书
房屋认购协议书
2015/01/29 职场文书
党风廉正建设责任书
2015/01/29 职场文书
滴水洞导游词
2015/02/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
地道战观后感2000字
2015/06/04 职场文书
导游词之广西漓江
2019/11/02 职场文书