一、介绍jquery.cookie.js
Jquery.cookie.js是基于Jquery的插件,jquery是一个轻量级的cookie插件,可以读写和删除cookie。
Jquery.cookie.js可以从Github获取源代码https://github.com/carhartl/jquery-cookie。
其次,介绍了jquery.cookie.js的基本用法。
JQuery操作cookie插件,大致使用如下:
1.读取Cookie值。
$.cookie(' _ 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,路径:'/' });
(4)为特定网站设置cookie。
$.cookie('cookieName ',' cookieValue ',{expires:7,path:'/',domain: 'souvc.com ',secure: false,raw : false });
参数解释:
1).expires: 365
定义cookie的有效时间,可以是一个数字(从创建cookie开始的天数)或一个日期对象。如果省略,创建的cookie是会话cookie,当用户退出浏览器时将被删除。
//注意:默认情况下,只有设置了cookie的网页才能读取cookie。如果您希望一个页面读取另一个页面设置的cookie,则必须设置cookie的路径。cookie的路径用于设置可以读取cookie的顶层目录。将此路径设置为网站的根目录允许所有网页相互读取cookie(一般不设置此方式以防止冲突)。
Expires:(数字|日期),可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负,此cookie将被删除;如果未设置或设置为空,此cookie将被视为会话Cookie,并在浏览器关闭后删除。
var COOKIE _ NAME=' usernameif($。COOKIE(COOKIE _ NAME)){ $(' # username ')。val($。COOKIE(COOKIE _ NAME));}$('#check ')。单击(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 3360 date });}else{$。cookie(COOKIE_NAME,null,{ path : '/' });//删除cookie } });2).path: '/'
默认:只有设置了cookie的网页才能读取cookie。定义cookie的有效路径。默认情况下,此参数的值是创建cookie的网页的路径(标准浏览器的行为)。如果你想在整个网站中访问这个cookie,你需要设置一个有效的路径,像这样:path: '/'。
如果您想删除一个定义了有效路径的cookie,您需要包含这个路径: $。调用函数时的cookie(“_ cookie”,null,{ path : '/' });Domain: 'example.com '默认值:创建cookie的网页所拥有的域名。
3).域名:创建cookie的网页所拥有的域名;
4).安全:默认值为假。如果是真的,cookie的传输协议应该是https。Raw:默认值为false。读写时会自动编码解码(encodeURIComponent编码,decodeURIComponent解码)。如果此功能已关闭,请将其设置为真。
3.删除cookie。
$.cookie(' _ cookie ',null);//删除cookie。
$.cookie('cookieName ',null,{ path : '/' });//注意:如果要删除路径有效的cookie。
三.用法。
先包含jQuery的库文件,后包含jquery.cookie.js的库文件。
脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。6 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。饼干。js /脚本四、简要说明。
1.页面效果
2.jsp页面:
输入类型=' text ' class=' lr-input ' placeholder='手机号码/用户名style=' width :255 px ' id=' username ' name=' username ' value=' '/input type=' password ' class=' lr-input ' placeholder='请输入登录密码style=' width :255 px ' id=' password ' name=' password '/div class=' lr-formWrap fn-clear ' p class=' lr-remUser fn-left ' id=' remUser select ' I class=' icon-check '/I记住用户/pa href=' JavaScript : void(0)' id=' log in-submit ' class=' lr-submit '登录a 3 .钢性铸铁样式:lr-RemUser { color : # 9d 9d;光标:指针;font-size : 14px线高: 25px左填充左侧: 30px} 4。射流研究…实现
//按照状态读取是否显示昵称if ($ .cookie('人民币用户'==' true '){ $(' # remUserSelect ').添加CLaSS(' active ');//如果是选中,那么给上选中的标志$(' #用户名')。价值(美元).cookie('昵称');//记录账号} //验证记住帐号函数vailemembernick(){ if($(' # RemUserSelect ')).有类(' active '){ var昵称=$(' #用户名').val();$.cookie('rmbUser ',' true ',{ expires : 7 });//存储一个带七天期限的饼干$。cookie('昵称,昵称,{ expires : 7 });//存储一个带七天期限的cookie}else {$ .cookie('rmbUser ',' false ',{ expires :-1 });$.cookie(' NickT ','',{ expires :-1 });}} 5.然后在点击登录的时候进行调用这个方法。
//登录提交表单$(' #登录-提交').on('click ',function(){ var form=$(' # loginFOrm ');if(!(vailPhone())返回;if(!vailPwd())返回;vailemembernickname();形式。submit();});6.登录查看浏览器控制台效果如下:
7.退出登录的时候可以看到登录框的效果:
以上内容是小编给大家介绍的框架操作甜饼干记住用户名的相关说明,希望对大家有所帮助!