jQuery实现的记住帐号密码功能方法_F11 - 专业站长和开发者的学习网站

分享到

jQuery实现的记住帐号密码功能方法

jquery 来源：互联网搜集作者：秩名发布时间：2019-08-04 10:14:36 人浏览

摘要

本篇文章介绍jQuery实现的记住帐号密码功能方法记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。 !DOCTYPE htmlhtmlhead meta charset=utf-8 titleCOOKIE/title/headbodyscript type=text/javascript src=https://cdn.boot

本篇文章介绍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天。然后你刷新页面，发现帐号密码还在表单中，不会被清空。

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/weixin_39927850/article/details/88366305

Tag : jQuery(160)

jquery实现员工管理注册页面的代码

HTML页面代码 body div class=container h2 class=text-center用户注册/h2 form action=Baidu.html method=post class=form-horizontal div class=form-group label for=username class=
jquery实现两个div中的元素相互拖动的方法介绍

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中：拖动完成后：代码实现： ? 1 2
jquery添加div实现消息聊天框代码

代码如下： htmlheadstyle* { margin: 0; padding: 0;} .border { margin-left: 300px; width: 900px; background-color: white; position: relative; border: 1px solid rgb(221, 221, 221
jQuery实现验证用户登录

内容显示效果输入之前输入之后点击校验废话少说，先上代码： HTML代码： !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead meta http-equiv=Conte
html+jQuery实现拖动滑块图片拼图验证码插件（移动

电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前
Jquery实现获取子元素的方法

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取
jQuery实现的记住帐号密码功能方法

本篇文章介绍jQuery实现的记住帐号密码功能方法记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。 !D
JavaScript实现的弹出遮罩层特效经典示例【基于

本篇文章介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】效果图：代码： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title查看，修改，
Laravel admin实现消息提醒、播放音频功能

本篇文章介绍Laravel admin实现消息提醒、播放音频功能 1.找到laravel-admin 中的 index.blade.php 文件进行编辑 {{-- 音频通知 --}}audio style=display:none
jQuery属性选择器用法实例

本篇文章介绍jQuery属性选择器用法实例属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute) input id=txtUsername type=text