通过jquery.cookie.js实现记住用户名、密码登录功能


Posted in jQuery onJune 20, 2018

Cookies

定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;

下载与引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js;

下载:http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

1.添加一个"会话cookie"

$.cookie('the_cookie', 'the_value');

这里没有指明 cookie有效时间,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为 “会话cookie(session cookie)”。

2.创建一个cookie并设置有效时间为 7天

$.cookie('the_cookie', 'the_value', { expires: 7 });

这里指明了cookie有效时间,所创建的cookie被称为“持久 cookie (persistent cookie)”。注意单位是:天;

3.创建一个cookie并设置 cookie的有效路径

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突)。

4.读取cookie

$.cookie('the_cookie');

5.删除cookie

.cookie('the_cookie', null); //通过传递null作为cookie的值即可

6.可选参数

$.cookie('the_cookie','the_value',{
 expires:7, 
 path:'/',
 domain:'jquery.com',
 secure:true
}) 

expires:(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;
path:(String)创建该Cookie的页面路径;
domain:(String)创建该Cookie的页面域名;
secure:(Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;

代码示例:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.base64.js"></script>
<script language="javascript" type="text/javascript"> 
function setCookie(){ //设置cookie 
   var loginCode = $("#login_code").val(); //获取用户名信息 
   var pwd = $("#login_password").val(); //获取登陆密码信息 
   var checked = $("[name='checkbox']:checked");//获取“是否记住密码”复选框
   if(checked){ //判断是否选中了“记住密码”复选框 
   $.cookie("login_code",loginCode);//调用jquery.cookie.js中的方法设置cookie中的用户名 
   $.cookie("pwd",$.base64.encode(pwd));//调用jquery.cookie.js中的方法设置cookie中的登陆密码,并使用base64(jquery.base64.js)进行加密 
   }else{ 
   $.cookie("pwd", null); 
   } 
 } 
 function getCookie(){ //获取cookie 
   var loginCode = $.cookie("login_code"); //获取cookie中的用户名 
   var pwd = $.cookie("pwd"); //获取cookie中的登陆密码 
   if(pwd){//密码存在的话把“记住用户名和密码”复选框勾选住 
   $("[name='checkbox']").attr("checked","true"); 
   } 
   if(loginCode){//用户名存在的话把用户名填充到用户名文本框 
   $("#login_code").val(loginCode); 
   } 
   if(pwd){//密码存在的话把密码填充到密码文本框 
   $("#login_password").val($.base64.decode(pwd)); 
   } 
 } 
function login(){ 
 var userName = $('#login_code').value; 
 if(userName == ''){ 
  alert("请输入用户名。"); 
  return; 
 } 
 var userPass = $('#login_password').value; 
 if(userPass == ''){ 
  alert("请输入密码。"); 
  return; 
 } 
 //判断是否选中复选框,如果选中,添加cookie
 if($("[name='checkbox']").attr("checked","true")){ 
  //添加cookie 
  setCookie(); 
  alert("记住密码登录。"); 
  window.location = "http://www.baidu.com"; 
 }else{ 
  alert("不记密码登录。"); 
  window.location = "http://www.baidu.com"; 
 } 
} 
</script> 
</head> 
<body onload="getCookie();"> 
<center> 
 <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;"> 
  <tr> 
   <td align="center" colspan="2">欢迎登录</td> 
  </tr> 
  <tr> 
   <td align="right"> 
    <label>用户名:</label> 
   </td> 
   <td align="left"> 
    <input type="text" id="login_code" name="login_code" style="width:160px; margin-left:10px;" /> 
   </td> 
  </tr> 
  <tr> 
   <td align="right"> 
    <label>密 码:</label> 
   </td> 
   <td align="left"> 
    <input type="password" id="login_password" name="login_password" style="width:160px; margin-left:10px;" /> 
   </td> 
  </tr> 
  <tr> 
   <td align="center" colspan="2"> 
    <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span> 
    <input type="checkbox" style="vertical-align:middle;" /> 
   </td> 
  </tr> 
  <tr> 
   <td align="center" colspan="2"> 
    <input type="submit" id="subLogin" name="subLogin" value="登 录" onclick="login();"/> 
   </td> 
  </tr> 
 </table> 
</center> 
</body> 
</html>

总结

以上所述是小编给大家介绍的通过jquery.cookie.js实现记住用户名、密码登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 #jQuery
You might like
信用卡效验程序
2006/10/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
Python实现检测文件MD5值的方法示例
2018/04/11 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
初中音乐教学反思
2014/01/12 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
共产党员承诺书
2014/03/25 职场文书
统计专业自荐书
2014/07/06 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
给上级领导的感谢信
2015/01/22 职场文书
同学聚会邀请函
2015/01/30 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Java Dubbo框架知识点梳理
2021/06/26 Java/Android