通过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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jquery插件实现搜索历史
Apr 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
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JS简单计算器实例
2015/01/20 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
js轮播图的插件化封装详解
2017/07/17 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python中关于for循环的碎碎念
2017/06/30 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
20行python代码实现人脸识别
2019/05/05 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
自我评价如何写好?
2014/01/05 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2019新员工心得体会
2019/06/25 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技