Jquery操作cookie记住用户名


Posted in Javascript onMarch 29, 2016

一、jquery.cookie.js介绍

jquery.cookie.js是一个基于jquery的插件,一个轻量级的cookie 插件,可以读取、写入、删除 cookie。

jquery.cookie.js可以从Github上面获得源码 https://github.com/carhartl/jquery-cookie

二、jquery.cookie.js的基本用法介绍

jQuery操作cookie的插件,大概的使用方法如下:

1. 读取Cookie值

$.cookie('the_cookie'); //如果存在则返回cookieValue,否则返回null。

2. 设置cookie的值

(1) 默认设置。当没有指明cookie时间时,所创建的cookie有效期默认到用户浏览器关闭止,故被称为会话cookie。

$.cookie('the_cookie', ‘the_value');

(2) 设置有时间的cookie。 当指明时间时,故称为持久cookie,并且有效时间为天。

$.cookie(‘cookieName','cookieValue', {expires:7});

(3) 设置有路径的cookie 。如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。

$.cookie(‘cookieName','cookieValue', {expires:7, path:'/'});

(4)设置特定网站的cookie 。

$.cookie(‘cookieName','cookieValue',{expires:7, path:'/' , domain: ‘souvc.com' , secure: false , raw:false});

参数解释:

1).expires: 365

定义cookie的有效时间,值可以是一个数字(从创建cookie时算起,以天为单位)或一个Date 对象。如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。

//注:在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突) 。

expires: (Number | Date) 有效期,可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负数,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当作Session Cookie处理,并且在浏览器关闭后删除。

var COOKIE_NAME = 'username';
if( $.cookie(COOKIE_NAME) ){
$("#username").val( $.cookie(COOKIE_NAME) );
}
$("#check").click(function(){
if(this.checked){
$.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });
//var date = new Date();
//date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期
//$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });
}else{
$.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie
}
});

2).path: '/'

默认情况:只有设置cookie的网页才能读取该cookie。 定义cookie的有效路径。默认情况下, 该参数的值为创建 cookie 的网页所在路径(标准浏览器的行为) 。 如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: '/'。

如果你想删除一个定义了有效路径的 cookie,你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。 domain: 'example.com' 默认值:创建 cookie的网页所拥有的域名。

3). domain:创建cookie所在网页所拥有的域名;

4). secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭这个功能,请设置为true。

3. 删除cookie 。

$.cookie('the_cookie', null); //删除一个cookie

$.cookie(‘cookieName',null,{path:'/'}); //注:如果想删除一个带有效路径的cookie

三、使用方法

首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件。

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

四、简要说明。

1. 页面效果

Jquery操作cookie记住用户名

2. jsp页面:

<input type="text" class="lr-input" placeholder="手机号码/用户名" style="width:255px" id="username" name="username" value=""/> <input type="password" class="lr-input" placeholder="请输入登录密码" style="width:255px" id="password" name="password" /> 
<div class="lr-formWrap fn-clear">
<p class="lr-remUser fn-left" id="remUserSelect"><i class="icon-check"></i>记住用户</p>
<a href="javascript:void(0)" id="login-submit" class="lr-submit">登录</a>

3. css样式:

.lr-remUser {
color: #9d9d9d;
cursor: pointer;
font-size: 14px;
line-height: 25px;
padding-left: 30px;
}

4. js实现

//按照状态读取是否显示昵称
if ($.cookie("rmbUser") == "true") {
$("#remUserSelect").addClass("active");//如果是选中,那么给上选中的标志
$("#username").val($.cookie("nickName"));//记录账号
} 
//验证记住帐号
function vailRememberNickName(){
if($("#remUserSelect").hasClass("active")){
var nickName = $("#username").val();
$.cookie("rmbUser", "true", { expires: 7 }); // 存储一个带7天期限的 cookie
$.cookie("nickName", nickName, { expires: 7 }); // 存储一个带7天期限的 cookie
}else {
$.cookie("rmbUser", "false", { expires: -1 });
$.cookie("nickName", '', { expires: -1 });
}
}

5. 然后在点击登录的时候进行调用这个方法。

//登录提交表单
$("#login-submit").on("click",function(){
var form = $("#loginForm");
if(!vailPhone())return;
if(!vailPwd())return;
vailRememberNickName();
form.submit();
});

6. 登录查看浏览器控制台效果如下:

Jquery操作cookie记住用户名

7. 退出登录的时候可以看到登录框的效果:

Jquery操作cookie记住用户名

以上内容是小编给大家介绍的Jquery操作cookie记住用户名的相关说明,希望对大家有所帮助!

Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
You might like
使用URL传输SESSION信息
2015/07/14 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
Vue仿百度搜索功能
2020/12/28 Vue.js
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
pandas 小数位数 精度的处理方法
2018/06/09 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python如何调用外部系统命令
2019/08/07 Python
Python Process多进程实现过程
2019/10/22 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
2014教师党员自我评议总结
2014/09/19 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers