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 28 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jquery简易手风琴插件的封装
Oct 13 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
咖啡的化学
2021/03/03 咖啡文化
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP修改session_id示例代码
2014/01/08 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Python爬取京东的商品分类与链接
2016/08/26 Python
python中使用print输出中文的方法
2018/07/16 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
环境卫生倡议书
2014/08/29 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL