Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

使用JQcookie插件实现用户自动登录

Posted on 2016年9月7日 by king2088

JQ是个很好的JavaScript库,做前端的必备库之一,其开源的各种插件都非常多,今天要来说一下JQ的cookie插件,并且使用cookie实现自动登录的功能(不是记住密码功能)。
首先下载jq:http://jquery.com/
jq的cookie插件下载地址http://plugins.jquery.com/cookie/
获得了插件后,我们要先分析下要如何实现这个功能
分析:
1、用户填写用户名和密码,点击登录则创建一个相应的用户名及密码的cookie
2、用户在点击登录的时候,通过JQ获得表单中的用户名和密码
3、cookie创建好了以后,让表单自动记住用户名和密码(就是将cookie中的用户名和密码赋值给相应的表单)
4、模拟用户自动点击登录功能
有了以上的分析,我们就可以直接来写代码了

1、JSP页面,参考而已,如果需要自己写html请自行进行修改下面的JSP页面即可

<%-- Document : header1 Created on : 2016-7-6, 19:04:57 Author : Mr.Tao --%>
<%@page contentType="text/html" pageEncoding="GB2312"%>

<%=Sitename%>

  • 首页
  • 资讯
  • 留言
  • 预定/付款
    <% if(uname!=null){ uname = (String)session.getAttribute("uname"); out.println("
  • "
    + uname
    +",
  • "
    +"

  • 个人中心"
    +"

      "
      +"

    • 购物历史
    • "
      +"

    • 预订/付款
    • "
      +"

    • 推荐音乐
    • "
      +"

    • 站内邮件
    • "
      +"

    • 个人信息
    • "
      +"

    • 退出登录
    • "
      +"

    "
    +"

  • ");
    }
    else {
    %>

  • 登陆
  • 注册
  • <% } %>

会员登陆


7天内自动登陆

注册忘记密码


2、创建cookie,写一个函数

//cookie创建
function SaveCookie() {
if ($('input[name=ck_MNBUser]').is(':checked')) {//假如checkbox被选中
var str_name = $('input[name=username]').val();//获得表单名字为username的值
var str_pswd = $('input[name=password]').val();//获得表单名字为password的值
$.cookie('User', 'true', { expires: 7 }); //存储一个带7天期限的cookie
$.cookie('mz', str_name, { expires: 7 });
$.cookie('pwd', str_pswd, { expires: 7 });
}
else {//如果checkbox未选中则创建一个空的cookie
$.cookie('User', 'false', { expire: -1 });
$.cookie('mz', '', { expires: -1 });
$.cookie('pwd', '', { expires: -1 });
}
}

3、当用户点击登录按钮是触发SaveCookie(),创建相应的cookie值

$('input[name=Login_submit]').click(function(){
SaveCookie();
});

4、自动模拟点击登录功能

//自动读取用户名密码
if ($.cookie('MNBUser') == 'true') {
var MnbU=$.cookie('mz');
var MnbP=$.cookie('pwd');
//赋值给input
$('input[name=username]').val(MnbU);
$('input[name=password]').val(MnbP);
//判断cookie值是否为空
if(MnbU!='' || MnbP!='' || MnbU.length>0 || MnbP.length>0){
//$('input[name=ck_MNBUser]').attr('checked', true);
//自动登录无需再次选中checkbox,如果选中了,那么每次登录都会延长7天时间,如果用户天天登录,那么这个cookie就一直存在下去
//li.login_windows存在才执行模拟点击事件
if($('li').hasClass('login_windows')){
$('input[name=Login_submit]').trigger("click");//模拟点击使用.trigger("click")
}
}
}

注意:这只是一个简单的范例,cookies中已经保存了明文密码,对于网站来说肯定是不安全的,只要打开浏览器的cookie即可查看到明文的用户名和密码,建议大家使用cookie的来存储session的ID或者其他key,让服务器来自动匹配用户即可。

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme