jQuery cookie 实现记住用户名和密码功能
jQuery cookie 实现记住用户名和密码功能
HTML代码
<div class="wrap">
<div class="line-top"></div>
<div class="line-right"></div>
<div class="line-bottom"></div>
<div class="line-left"></div>
<div class="keyboard"></div>
<div class="box">
<div class="title">
<div class="logo"></div>
<h1>森林防火信息管理系统</h1>
</div>
<div class="user">
<div class="txt">
<i class="iconfont username"></i><label for="">用户名:</label>
</div>
<div class="input">
<input type="text" class="username" placeholder="请输入用户名" name="userName" id="userName" value="">
</div>
</div>
<div class="pwd">
<div class="txt">
<i class="iconfont password"></i><label for="">密<i style="width:1em"></i>码:</label>
</div>
<div class="input">
<input type="password" class="password" placeholder="请输入密码" name="passWord" id="passWord" value="">
</div>
</div>
<div class="login">
<input type="button" tabindex="1" id="btn-login" onclick="login.erification()" value="登录">
<div class="verif">
<input type="text" id="txt_code" placeholder="验证码">
<div class="verification"><img style="margin-top:13px;" id="imgyzm" /></div>
</div>
</div>
<div class="reme-key">
<input type="checkbox" name="" onclick="cookierRmemberPassword()" id="remember-password"><label for="remember-password">记住密码</label>
</div>
</div>
</div>
JS功能代码
function rememberPassword() {
//存储变量
this.username = $('#userName').val();
this.password = $('#passWord').val();
this.cookie;
if (!!$.cookie('user')) {
this.cookie = eval($.cookie('user'));
} else {
$.cookie('user', '[]');
this.cookie = eval($.cookie('user'));
};
}
rememberPassword.prototype = {
cookieInit: function() { //初始化
var temp = this.cookie,
username = this.username,
start = false;
console.log(temp);
if (temp.length > 0) {
$.each(temp, function(i, item) {
if (item.first == true) {
$('#userName').val(item.username);
$('#passWord').val(item.password);
$('#remember-password').attr('checked', true)
}
});
}
$('#userName').blur(function() {
console.log('失去焦点');
//检查是否存在该用户名,存在则赋值,不存在则不做任何操作
$.each(temp, function(i, item) {
if (item.username == $('#userName').val()) {
$('#userName').val(item.username);
$('#passWord').val(item.password);
$('#remember-password').attr('checked', true)
start = true;
return false;
} else {
$('#passWord').val('');
} });
});
},
//记住密码
cookieRemeber: function() {
var temp = this.cookie,
username = this.username,
password = this.password,
start = false;
//检测用户是否存在
$.each(temp, function(i, item) {
if (item.username == username) {
//记录最后一次是谁登录的
item.first = true;
$('#passWord').val(item.password);
start = true;
return;
} else {
item.first = false;
}
});
//不存在就把用户名及密码保存到cookie中
if (!start) {
temp.push({
username: username,
password: password,
first: true
});
}
//存储到cookie中
$.cookie('user', JSON.stringify(temp));
},
//删除密码
cookieDelete: function() {
var temp = this.cookie,
username = this.username,
num = 0;
//检测用户是否存在
$.each(temp, function(i, item) {
if (item.username === username) {
num = i;
}
});
//删除里面的密码
temp.splice(num, 1);
//存储到cookie中
$.cookie('user', JSON.stringify(temp));
}
}
用户登录成功后加入这段代码
if ($('#remember-password').attr('checked')) {
var cookie = new rememberPassword();
cookie.cookieRemeber();
}
初始化代码
$(document).ready(function () {
//移除密码
$('#remember-password').click(function () {
if (!$('#remember-password').attr('checked')) {
var cookie = new rememberPassword();
cookie.cookieDelete();
}
});
//cookie记住密码
var cookie = new rememberPassword();
cookie.cookieInit();
});
注意:如果站点有登录登出功能,切记登出路劲与登录路劲一模一样,因为cookie存在路径,必须在同一个路径下才能读取到内容
jQuery cookie 实现记住用户名和密码功能的更多相关文章
- 用cookie实现记住用户名和密码
1.当第一次发送请求时,在jsp页面并不能获取cookie对象,第一次是addCookie,之后再请求时才能获得. session和sessionid在服务器端生成的时候,同时把sessionID放在 ...
- Java实现应用程序记住用户名、密码功能
1. 从网上下载jquery.cookie.js,拷贝到应用程序中. 2. 登录页面(login.jsp)导入jquery.cookie.js <script type=&q ...
- Java:Cookie实现记住用户名、密码
package com.gamecenter.api.util; import java.io.IOException; import java.io.PrintWriter; import java ...
- OpenVPN 如何记住用户名和密码
最近在使用OpenVPN,但是没有记住用户名和密码功能,太坑人,研究一下发现是可以的. 1. 在OpenVPN安装目录下\OpenVPN\config文件夹中找到vpnserver.ovpn文件. 2 ...
- 通过jquery.cookie.js实现记住用户名、密码登录功能
Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...
- jquery.cookie.js实现cookie记住用户名和密码
记得导入 <script src="jquery.js" type="text/javascript"></script> <sc ...
- ASP.NET中登录时记住用户名和密码(附源码下载)--ASP.NET
必需了解的:实例需要做的是Cookie对象的创建和对Cookie对象数据的读取,通过Response对象的Cookies属性创建Cookie,通过Request对象的Cookies可以读取Cookie ...
- (转)ASP.NET里面简单的记住用户名和密码
using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using S ...
- TortoiseGit:记住用户名和密码
1.背景: 我们在使用 tortoisegit 工具时会无可避免的经常性 pull 和 push,这时通常要输入用户名和密码,由于麻烦,就有人提出了记住用户名和密码的需求... ... 2.设置: [ ...
随机推荐
- (一)spark算子 分为3大类
value类型的算子 处理数据类型为value型的算子(也就是这个算子只处理数据类型为value的数据),可以根据rdd的输入分区与输出分区的关系分为以下几个类型 (1)输入分区与输出分区一对一型 m ...
- 《TomCat与Java Web开发技术详解》(第二版) 第一章节的学习总结--HTTP组成+基本访问方式
1.需要看懂HTML文件中的组成元素的基本含义.不同的组成元素,可以使得HTML支持文本,图片(img,将图片发给客户端),静态音频/视频(embed src,将音频视频发给客户端),超链接(href ...
- Apache中KeepAlive 配置
引子 先来分析一个Yslow 测试的一个页面的前端性能. 这里所有的请求是指http请求,对于一个请求各个阶段的划分,阻挡->域名解析->建立连接->发送请求->等待响应-&g ...
- linux下LAMP环境搭建
++++++++++++++++++++++++++++++++++++++++++++++ linux下LAMP环境搭建 ++++++++++++++++++++++++++++++++++++++ ...
- jquery get ($.get) 事件用法与分析
jquery get ($.get) 事件用法与分析 get() 方法通过远程 HTTP GET 请求载入信息.这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如 ...
- Windows下安装appium桌面版和命令行版
安装appium桌面版和命令行版 一 桌面版(打开很慢,常用于辅助元素定位) 1.官网下载window版本: github search appium desktop download late ...
- Sum of Remainders(数学题)
F - Sum of Remainders Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I ...
- 在安装mysql数据库的过程中,显示msvcp100.dll丢失?则么办?
方案一:重装操作系统为windows10专业版 方案二:问题: 解答: 报错原因是VC运行库不全或者没有安装导致,百度搜索VC集合下载安装, 链接:https://pan.baidu.com/s/1U ...
- mac安装iterm2
1 安装 下载直接拖入应用中. 2 配置 2.1 配置oh my zsh https://github.com/robbyrussell/oh-my-zsh 一键安装: sh -c "$(c ...
- 通过Safari获取iOS设备的UUID,远程发送更是便捷
1.获取UUID (1)在Safari上输入:http://fir.im/udid (2)点击安装描述文件,然后就可以获取到UUID了 2.fir.im提供一个非常好用的内侧平台 详情使用见:http ...