js cookie实现记住密码功能


Posted in Javascript onJanuary 17, 2017

 本文为大家分享了js和jQuery记住密码功能的方法,具体如下

一. js 实现记住密码功能

html:

<form id="form22" name="form22" action="checklogin.action" method="post" >
 <div class="username" style="margin-top:50px;">
  <label>用户名:</label>
  <input type="text" name="username" id="userName" />
  <span id="myuser" style="color: red; font-size:12px; font-weight: normal;"></span>
 </div>

 <div class="password">
  <label>密 码:</label>
  <input name="password" id="passWord" type="password" />
  <span id="mypass" style="color: red; font-size:12px; font-weight: normal;"></span>
 </div>

 <div class="user_type" >
  <label>  </label>
  <input type="checkbox" id="saveUserName" style="float: left; margin-top:3px;" /> 
  <span> 记住用户</span>  
 </div>

 <input type="button" value="" class="btn_login" id="btn_login" onclick="checkform();"/>

</form>

cookie.js:

function setCookie (name, value) {
  var Days = 30; //此 cookie 将被保存 30 天
  var exp = new Date();
  exp.setTime(exp.getTime() + 1000);
  if(value==""||value=="null"
   ||value=="null"||value==" "){
  }else{
  document.cookie = name + "="+ escape(value) +";expires=Sun, 17-Jan-2038 19:14:07 GMT";
  }
}
function getCookie(sName){
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
   var aCrumb = aCookie[i].split("=");
   if (sName == aCrumb[0])
   {
    return aCrumb[1];
   }
  }
  return null;
}
function checkCookieExist(name){
 if (getCookie(name))
  return true;
 else
  return false;
}

function deleteCookie(name, path, domain){
 var strCookie;
 // 检查Cookie是否存在
 if (checkCookieExist(name)){
  // 设置Cookie的期限为己过期
  strCookie = name + "=";
  strCookie += (path) ? "; path=" + path : "";
  strCookie += (domain) ? "; domain=" + domain : "";
  strCookie += "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  document.cookie = strCookie;
 }
}
function saveCookie(name, value, expires, path, domain, secure){
 var strCookie = name + "=" + value;
 if (expires){
  // 计算Cookie的期限, 参数为天数
  var curTime = new Date();
  curTime.setTime(curTime.getTime() + expires*24*60*60*1000);
  strCookie += "; expires=" + curTime.toGMTString();
 }
 // Cookie的路径
 strCookie += (path) ? "; path=" + path : "";
 // Cookie的Domain
 strCookie += (domain) ? "; domain=" + domain : "";
 // 是否需要保密传送,为一个布尔值
 strCookie += (secure) ? "; secure" : "";
 document.cookie = strCookie;
}

login.js

window.onload = function(){
 //console.log("ctx: " + "${ctx}");

 var name = getCookie("loginUserName");
 document.getElementById("passWord").value="";
 if(name != null && name != "") {
  document.getElementById("userName").value = name;      

  document.getElementById("passWord").focus();
 } else {  document.getElementById("userName").focus();
 }

}

function checkform(){
 ......
 var isChecked = document.getElementById("saveUserName").checked;
 if(isChecked) {
  setCookie("loginUserName",userName);
 } 
 ......
}

二. jquery 实现记住密码功能

参考:http://www.cnblogs.com/lindaZ/p/5069981.html

html:

<form class="form-signin">
<input type="text" id="username" name="account" autofocus required placeholder="用户名" class="form-control" style="width: 250px; margin-bottom: 5px;">

<input type="password" id="password" name="password" required placeholder="密码" class="form-control" style="width: 250px;">

<br/>

<input id="remember_me" type="checkbox" name="remember_me" onkeydown="check_enter(event)" style="width:250;">

<span for="remember_me" onkeydown="check_enter(event)" style="width:250px">记住我</span>

<br/><br/>

<span class="btn btn-lg btn-primary btn-block">登 录</span>
</form>
<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.cookie.js" type="text/javascript"></script>

判断checkbox是否被选中,若选中,则将存储cookie:

if ($("#remember_me").attr("checked")) {

$.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie


$.cookie("username", account, { expires: 7 });


$.cookie("password", password, { expires: 7 });
}
else {


$.cookie("rmbUser", "false", { expire: -1 });


$.cookie("username", "", { expires: -1 });


$.cookie("password", "", { expires: -1 });
}

在每次刷新登录页面加载js时,取出cookie中的用户名和密码,若cookie不为空,用户名和密码输入框被cookie里面的内容填充,复选框设为勾上状态:

$().ready(function(){

//获取cookie的值


var username = $.cookie('username');


var password = $.cookie('password');



//将获取的值填充入输入框中


$('#username').val(username);


$('#password').val(password); 


if(username != null && username != '' && password != null && password != ''){
  //选中保存秘密的复选框


 $("#remember_me").attr('checked',true);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
javascript代码加载优化方法
Jan 30 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
angularjs ocLazyLoad分步加载js文件实例
Jan 17 #Javascript
微信小程序 登陆流程详细介绍
Jan 17 #Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 #Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
You might like
php中用数组的方法设置cookies
2011/04/21 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Python多继承原理与用法示例
2018/08/23 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python中zip函数如何使用
2020/06/04 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
计算机应用专业毕业生求职信
2014/06/03 职场文书
设计大赛策划方案
2014/06/13 职场文书
战友聚会策划方案
2014/06/13 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
歌舞青春观后感
2015/06/10 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python