通过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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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
php根据分类合并数组的方法实例详解
2013/11/06 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
jquery操作select大全
2014/04/25 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python实现感知机(PLA)算法
2017/12/20 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
python Scrapy框架原理解析
2021/01/04 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
公司离职证明标准格式
2014/11/18 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
中秋节主题班会
2015/08/14 职场文书