通过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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php 引用(&amp;)详解
2009/11/20 PHP
纯php生成随机密码
2015/10/30 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
学习Vue组件实例
2018/04/28 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
食品安全责任书
2014/04/15 职场文书
公司节能减排方案
2014/05/16 职场文书
公开承诺书格式
2014/05/21 职场文书
医生辞职信范文
2015/03/02 职场文书
挂职个人工作总结
2015/03/05 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS