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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
Vue项目打包编译优化方案
Sep 16 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
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python多项式回归的实现方法
2019/03/11 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python实现梯度下降法
2020/03/24 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Python eval函数原理及用法解析
2020/11/14 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
开办饭店创业计划书
2013/12/28 职场文书
单位授权委托书范文
2014/08/02 职场文书
小学运动会报道稿
2014/10/04 职场文书
撤诉状格式范本
2015/05/19 职场文书
教师工作证明范本
2015/06/12 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
python小程序之飘落的银杏
2021/04/17 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS