通过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 Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jquery实现图片放大镜效果
Dec 23 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
党校学习自我鉴定
2014/02/24 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
长江三峡导游词
2015/01/31 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis