在登录界面添加记住密码功能,代码如下:

//设置cookie
var passKey = '4c05c54d952b11e691d76c0b843ea7f9';
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + encrypt(escape(cvalue), passKey) + "; " + expires;
}
//获取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1){
var cnameValue = unescape(c.substring(name.length, c.length));
return decrypt(cnameValue, passKey);
}
}
return "";
}
//清除cookie
function clearCookie(cname) {
setCookie(cname, "", -1);
}

setCookie(cname, cvalue, exdays)三个参数分别是存放的cookie名字、cookie值、cookie有效天数

由于cookie中不能包含等号、空格、分号等特殊字符,我在设置cookie时使用escape() 函数对字符串进行编码,获取cookie时使用unescape()函数解码。但是escape()函数不会对 ASCII 字母和数字进行编码,所以存放到cookie中的账号、密码是以明文存放的,不安全。于是上网找了一个对字符串加密解密算法,该算法需要传两个参数,一个需要加密的字符串,一个自定义加密密钥passKey。设置cookie时使用encrypt(value, passkey)加密,读取cookie时使用decrypt(value, passKey)解密,该算法附在本文最后。

存取cookie方法的调用:

<input type="checkbox" id="rememberMe" checked="checked"/>记住密码

存入cookie

  • 判断帐号密码无误后将用户名密码存入cookie
if($('#rememberMe').is(':checked')){
setCookie('customername', $('#username').val().trim(), 7)
setCookie('customerpass', $('#password').val().trim(), 7)
}

自动填充

  • 进入登录界面后,判断cookie中是否有帐号密码,如果有就自动填充
$(function(){

  //获取cookie
var cusername = getCookie('customername');
var cpassword = getCookie('customerpass');
if(cusername != "" && cpassword != ""){
$("#username").val(cusername);
$("#password").val(cpassword);
}
}

js中利用cookie实现记住密码功能的更多相关文章

  1. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  2. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  3. cookie实现记住密码功能

    之前在一次面试过程中,被问到前后端如何实现记住密码功能,所以自己也试着做,这是纯js做的. 一.实现思路 1.前端页面,自己简单写了一个页面,如下图,不喜勿喷 2.主要有三个函数 setCookie( ...

  4. node.js平台下,利用cookie实现记住密码登陆(Express+Ejs+Mysql)

    本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...

  5. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

  6. java实现记住密码功能(利用cookie)

    <br> <input type="text" id="userName" name="userName" value=& ...

  7. 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名!

    // 记住密码功能 JS结合JQuery 操作 Cookie 实现记住密码和用户名! var username = document.getElementById("username&quo ...

  8. cookie记住密码功能

    很多门户网站都提供了记住密码功能,虽然现在的浏览器都已经提供了相应的记住密码功能 效果就是你每次进入登录页面后就不需要再进行用户名和密码的输入: 记住密码功能基本都是使用cookie来进行实现的,因此 ...

  9. JavaScript实现记住密码功能

    用js实现记住密码功能,但是前端记住密码不安全,最好还是不要用.我感觉这个记住密码应该是通过与后台建立一个会话来实现. 这个效果的测试地址在:http://ofoyou.com/blog/rePass ...

随机推荐

  1. mysql 内置功能目录

    mysql 内置功能 视图介绍 mysql 内置功能 视图 使用 mysql 内置功能 触发器介绍 mysql 内置功能 触发器 实验 mysql 内置功能 事务 介绍 mysql 内置功能 存储过程 ...

  2. 帝国cms用户密码忘记怎么修改

    帝国CMS7.2忘记后台密码怎么找回呢?有时候经常会忘记用户密码,我们可以通过修改数据库的值来初始化密码,下面就和ytkah一起来操作吧 1:进入phpmyadmin 2:找到 phome_enews ...

  3. Mysql事件监控日志

    建立监控表: CREATE TABLE `t_event_history` ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, `dbname ...

  4. LVS基础知识

    LVS介绍(Linux Virtual Server) 负载调度器,已经集成到内核 工作原理:VS根据请求报文的目标IP和目标协议及端口将其调度转发至某RS,根据调度算法来挑选RS iptables/ ...

  5. (转)Redis集群搭建与简单使用(最少需要 6个节点)

    介绍安装环境与版本 用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-3.2.4 版本. 两台虚拟机都是 CentOS ,一台 ...

  6. Linux下solr集群搭建

    第一步:创建四个tomcat实例.每个tomcat运行在不同的端口.8180.8280.8380.8480 第二步:部署solr的war包.把单机版的solr工程复制到集群中的tomcat中. 第三步 ...

  7. zabbix 监控 ElasticSearch

    ElasticSearch  可以直接使用zabbix官方的模板 模板地址: https://github.com/mkhpalm/elastizabbix 通过zabbix server 直接监控 ...

  8. PHP面试准备

    框架:Laravel,Yii,Tp (1)纵向不同版本及框架本身特性 (2)横向对比,不同框架的优缺点 面向对象编程: (1)面向对象的基本特征:封装,继承,多态 (2)设计模式:单例模式,工厂模式, ...

  9. 解决bug感觉

    解决bug,没有思路,很烦躁: 时间过去好久,还是没头绪,没结论: ...... ...... ...... ...... ...... 过了好久,这样还不如冷静下来,按照正确的方法(review代码 ...

  10. xcodebuild 打包

    我的xcode版本比较高,查找的一些低版本的构建都不可用,所以在此记录我的打包过程. 1.app代码仓需要发布的ipa的打包:采用achieve的方式 (1)前期工作 mkdir arch archi ...