jQuery实现的记住帐号密码功能完整示例
更新时间：2019年08月03日 09:23:08 作者：TANKING-
这篇文章主要介绍了jQuery实现的记住帐号密码功能,结合完整实例形式分析了jQuery使用jquery.cookie.js插件记录用户信息相关操作技巧,需要的朋友可以参考下
本文实例讲述了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>
只要在表单输入帐号密码，再勾选记住密码，那么你的帐号密码就已经被存入到cookie了，有效期7天。然后你刷新页面，发现帐号密码还在表单中，不会被清空。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery的cookie操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
- JQuery记住用户名和密码的具体实现
- JQuery记住用户名密码实现下次自动登录功能
- 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）
- 通过jquery.cookie.js实现记住用户名、密码登录功能
- 使用jquery的cookie实现登录页记住用户名和密码的方法
- jquery.cookie.js实现用户登录保存密码功能的方法
- jQuery加密密码到cookie的实现代码
- jQuery.cookie.js实现记录最近浏览过的商品功能示例
- jquery使用Cookie和JSON记录用户最近浏览历史
- 通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
相关文章
编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件2017-03-03
这篇文章主要介绍了jQuery validate 验证radio实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
jQuery EasyUI Accordion可伸缩面板组件使用详解
这篇文章主要为大家详细介绍了jQuery EasyUI Accordion可伸缩面板组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jquery制作搜狐快站页面效果示例,需要的朋友可以参考下2014-02-02
passwordStrength 基于jquery的密码强度检测代码使用介绍
我们设定密码强度等级为10，制作一张图片表示每个等级状态，给密码框绑定keyup事件，通过keyup事件获取密码值，然后使用正则进行判断密码强度等级，然后变换相应的图片2011-10-10
这篇文章主要介绍了jQuery实现视频作为全屏幕背景的方法和示例，推荐给有相同需求的小伙伴2014-12-12
这篇文章主要介绍了jQuery选择器之基本选择器用法,结合实例形式分析了id选择器、class选择器、element选择器等选择器相关使用技巧,需要的朋友可以参考下2019-02-02
下面小编就为大家带来一篇详谈表单格式化插件jquery.serializeJSON。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了JQuery实现折叠式菜单的详细代码,本文通过实例代码通过两种风格给大家详细介绍，需要的朋友可以参考下2020-06-06
通过电商购买过电影票的朋友都很熟悉此功能，那么在线选座订座使用程序怎么实现的呢，接下来，给大家分享基于jquery实现在线选座订座之影院篇，感兴趣的朋友快来围观2015-08-08
最新评论