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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Django 限制访问频率的思路详解
2019/12/24 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
详解Python IO口多路复用
2020/06/17 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
运动会入场式解说词
2014/02/18 职场文书
白血病募捐倡议书
2014/05/14 职场文书
应届毕业生自荐信
2014/05/28 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
初婚初育证明范本
2015/06/18 职场文书
Python基础详解之描述符
2021/04/28 Python
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis