jquery中甜饼干用法实例详解（获取,存储,删除等)

本文实例讲述了jquery中甜饼干用法。分享给大家供大家参考，具体如下：

甜饼干在jquery中有指定的甜饼干操作类，下面我先来介绍我们在使用甜饼干操作类时的一些问题，然后介绍正确的使用方法。

使用JQuery操作甜饼干时发生取的值不正确的问题：结果发现甜饼干有四个不同的属性： 名称，内容，域，路径

$.cookie(' _ cookie ')；//读取饼干$。cookie('the_cookie '，' the _ value ')；//存储饼干$。cookie('the_cookie '，' the_value '，{ expires : 7 })；//存储一个带七天期限的饼干$。cookie('the_cookie '，''，{ expires :-1 })；//删除甜饼干使用：复制代码代码如下：$.cookie(' CurrentUid '，MenUid)；时未指定域和路径。

所有当域和路径不同时会产生不同的甜饼干复制代码代码如下：$.cookie(' CurrentUid ')；取值时会产生问题。

故：复制代码代码如下：$.cookie(' CurrentUid '，' MenuID '，{ path : '/' })；进行覆盖。同域下同一个cookieID对应一个值。

下面我们来看个实例

关于甜饼干的小路设置需要注意，如果不设置路径：'/'的话，路径则会根据目录自动设置[如：http://www.xxx.com/user/,path会被设置为/user']

$.扩展({ /** 1 .设置甜饼干的值，把名字变量的值设为价值示例$。cookie('名称','值');2.新建一个甜饼干包括有效期路径域名等示例$。cookie('name '，' value '，{expires: 7，path: '/'， ' jquery中的域。com '，secure : true })；3.新建甜饼干示例$。cookie('名称','值');4.删除一个甜饼干示例$。cookie('name '，null)；5.取一个饼干(名称)值给变种帐户=$。cookie('名称');* */cookiehelp :函数（名称、值、选项){ if(值类型！='undefined') { //给定名称和值，设置甜饼干选项=options | | { }；if(value===null){ value=' '；选项。expires=-1；} var expires=if(options。过期(选项类型。expires==' number ' | | options。过期。tout csting)){ var date；if(选项。expires==' number '){ Date=new Date()；约会。设置时间(日期。gettime()(选项。过期* 24 * 60 * 60 * 1000))；} else { date=options.expires}过期=';expires=' date。tout cstring()；//使用期满属性，IE不支持最大年龄} var path=options.path？path=' options . path : var domain=options . domain？domain=' options . domain : var secure=options . secure？安全":";文件。cookie=[名称，'='，encodeURIComponent(值),过期，路径，域，安全]。join(' ')；} else { //只给定名称，获取cookie var cookieValue=nullif(文档。cookie文档。饼干。=' '){ var cookies=document。饼干。拆分('；');for(var I=0；I cookies . lengthi){ var cookie=jquery。修剪(cookie[I])；//这个甜饼干字符串是否以我们想要的名称开头？if (cookie.substring(0，name。长度1)=(名称'='){ CookieValue=DecoDeuriComponent(cookie。子字符串(名称。长度1))；打破；} } }返回cookieValue } } })；Jquery操作饼干记录用户查询过信息

这是一个饼干数据生成的列表，

每次单击查询会存储一个域名，并把最后一次查询的域名放在最上方。本例子最多存储10个，大家可以根据自己情况进行设置

下在咱们一起来看看是怎么实现的吧

先写一个操作饼干的射流研究…文件如下

函数getid(id){ return(id==' string ')的类型？文件。getelementbyid(id): id }；函数getOffsetTop(el，p){ var _ t=El。offsetTop而(El=El。offset parent){ if(El==p)break；_ t=el.offsetTop } return _ t }函数getOffsetLeft(el，p){ var _ l=El。offsetleft而(El=El。offset parent){ if(El==p)break；_ l=El . offsetleft } return _ l } var currentInput=null函数BoxShow(e){ var input=e；if(！input.id) {input=e.target？目标： e。}currentInput=输入；FillUrls('网站');var box=getid(' all sitesbxhdl ')；if(方框。风格。display==' block ' currentinput。id==输入。id){ return；}盒子。风格。left=(getOffsetLeft(input))' px '；盒子。风格。top=(getOffsetTop)(输入)(输入。offset heart-1))“px”；盒子。风格。宽度=(输入。offsetwitth-4)“px”；盒子。风格。display=' block}函数BoxShourls(e){ BoxShow(e)；}函数InputSetValue(val){ var obj=currentInput；obj.value=valif(obj。GetAttribute(' URL '=' true '){ var tags=document。GetElementsBytagname(' input ')；for(var I=0；我标签。长度；i ) {if (tags[i]).getAttribute('url')=='true '标记[i]！=obj) {tags[i].value=val } } } BoxHide()；}//删除时使用，传入一个要删除的值就可以删除函数DelAllSitesValue(value){ var all sites=$ .cookie('网站');所有站点=所有站点。替换(值"|","");$.cookie('site '，allSites，{ expires : 7 })；FillUrls('网站');}函数BoxHide(){ if(getid(' AllSiteSbXhdl '){ getid(' AllSiteSbXhdl ')。风格。显示='无'；}}//加载列表函数FillUrls(cookieName) {var urls=$ .cookie(cookieName)；var html=if(URL){ var URL列表=URL。拆分(' | ')；长度var forvar stringcookiefor(var I=URL列表。长度-1；I=0；I-){ var text val=URL列表[I]；if ($ .装饰件(textval)！='' $.装饰件(textval)！=' undefined '){ html=' Li class=' lis ' a href=' JavaScript : input setvalue(' text val ' ')；'文本val '/a/LiBr/'；对于长度=对于长度1；如果(长度为10) {$。cookie('site '，stringcookie，{ expires : 7 })；打破；} else { string cookie=text val“|”字符串cookie；}}}} else {html='li没有记录/li'}getid('allSitesBoxContent ').innerHTML=html}函数closetime(e){ var obj=e . target？目标： e。物体。风格。imemode=' disabled}函数OnPaste(e) {var obj=e.target？目标： e。setTimeout(' MoveHttp(' obj。id ' ')'，100)；}函数MoveHttp(id) {var val=getid(id).价值；val=val.replace('http://'，' ')；if(val[val。length-1]=='/'){ val=val。子字符串(0，val。长度-1)；}getid(id ).值=valOnKeyup函数(e) {var obj=e.target？目标： e。setTimeout(' addInput(' obj。id ' ')'，200)；}函数addInput(id){ var obj=getid(id)；//如果是一个没有真实的的投入不执行如果。GetAttribute(' URL '==' true '){ if(obj。价值。indexof('。)0) {obj.value=obj.value.replace('。', '.');} var标记=文档。getelementsbytagname(' input ')；for(var I=0；我标签。长度；i ) {if (tags[i]).getAttribute('url')=='true '标记[i]！=obj) {tags[i].value=obj.value} } } }函数Init(){ $(' # AllSiteSbXhdl ')[0]。风格。显示='无'；$(':text ').每个（函数(){$(此)).bind('keyup '，OnKeyup)；$(这个)。bind('mousedown '，Boxshourls)；$(这个)。bind('mouseout '，BoxHide)；$(这个)。bind('focus '，clotime)；$(这个)。绑定('粘贴，OnPaste)；$(这个)。bind('mouseout '，BoxHide)；$(此)[0].' setAttribute('自动完成','关闭');});//取出Cookievar icpSite=$ .cookie('网站');if (icpSite) {//取出饼干不为空的话就给当前框ICP站点=ICP站点。split(' | ')[0]；$(“# site”).val(Ipcsite)；}}在这里面还附带了这样一个效果，就是同时输入多个输入框的值，如下图

如果那个输入框要使用这样的效果只要添加一个属性为url='true '就行了，这样方便可操作性强，想给那个框加效果就加上这个属性，不想加的直接不加url='true '就好了。

在使用这个效果的界面添加如下代码

div style=' display: none绝对位置：'id=' allsitesbxhdl ' class=' class list ' on mouseover=' this . style . display=' block ' ' on mouseout=' this . style . display=' none ' ' ul id=' allsitesbxcontent '/ul/div script type=' text/JavaScript ' Init()；/script其他JS直接放在一个JS文件中，只需在中引用它们。下拉列表是如何加载的？看下面的方法就知道了。

上传列表

函数FillUrls(cookieName) {var urls=$。cookie(cookieName)；var html=if(URL){ var URL list=URLs . split(' | ')；var for length=0；var stringcookiefor(var I=URL list . length-1；I=0；I-){ var text val=URL list[I]；if ($。装饰件(textval)！='' $.装饰件(textval)！=' undefined '){ html=' Li class=' lis ' a href=' JavaScript : input setvalue(' text val ' ')；'text val '/a/LiBr/'；for length=for length 1；如果(对于长度10) {//我这里只加载了10个项目，那么你可以调整$。cookie ('site '，string cookie，{expires : 7})根据自己的情况而定；打破；} else {//如果超过10，取最后10个string cookie=textval“|”string cookie；} } } } else { html=' Li no record/Li ' } getid(' all sites box content ')。innerhtml=html}完成后，我们只需要在单击查询时存储Cookie。请参见以下方法。

操作Cookie类

函数setCookie(名称，值){var oldcookie=$。cookie(名称)；if (oldcookie==null) {$。cookie(名称、值、{ expires : 7 })；} else {if ($)。cookie(名称)。indexOf(值)==-1) {$。cookie(名称，old cookie“|”值，{ expires : 7 })；} else {$。cookie(名称，oldcookie.replace(值' ')' | '值，{ expires : 7 })；}}FillUrls(名称)；}调用时，将复制的代码编写如下： setookie(' site '，strdomin)；好了，功能完成了。

进行特定测试。

代码写的不是很好，希望大家多提建议，我们会做相应的修改，力求完美。

Cookie属于存储的客户端，同一域名下只能访问一个Cookie。只要添加了域属性，子域就可以相互访问。存储方式如下：复制代码如下： $。Cookie ('domain '，值，{expires 3360 7，domain in 3360 ' 7c.com ' })；写$。在花费时间时直接使用cookie(“域”)；好，只要是子域，就这样调用，这样就可以实现这个域名下的Cookie共享功能。

Cookie的有效使用会给我们的网站带来n多种意想不到的效果和功能。我们来谈谈吧。

有关jQuery操作cookie的更多信息，请查看本网站主题：《jQuery的cookie操作技巧总结》。

希望本文对大家的jQuery程序设计有所帮助。