使用js操作cookie的一點(diǎn)小收獲分享
更新時(shí)間:2013年09月03日 15:12:00 作者:
js操作cookie想必大家并不陌生吧,本文積累了一點(diǎn)小經(jīng)驗(yàn),在此與大家分享下,希望對(duì)大家有所幫助
為了說(shuō)清楚這個(gè)問(wèn)題,必須從頭說(shuō)起。
首先從后臺(tái)配置一個(gè)參數(shù),放到一個(gè)字段里,該字段叫做keywords,這個(gè)參數(shù)的值叫做efmis://|efmfj|username|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012/|||||02,姑且不去管這個(gè)值有什么含義,相信很多人都遇到過(guò)比這個(gè)更復(fù)雜的字符串。后臺(tái)配置以后,前臺(tái)可以這么來(lái)顯示:${tag_bean.keywords},可以肯定,無(wú)論后臺(tái)配置成什么,前臺(tái)一定會(huì)原定不變的顯示出來(lái),第一個(gè)問(wèn)題出現(xiàn):在username這個(gè)位置上,嵌入的是當(dāng)前登錄用戶的用戶名,必須是動(dòng)態(tài)代碼。難道要寫成efmis://|efmfj|${username}|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012?這樣寫跟期望可有所不同,它會(huì)原樣不變的顯示出來(lái),并不會(huì)把EL表達(dá)式翻譯成動(dòng)態(tài)代碼,暫時(shí)不考慮能不能使用EL表達(dá)式的嵌套,很顯然不能直接使用,一定要要處理這么一個(gè)字符串。
這個(gè)字符串是要作為一個(gè)js方法的參數(shù)的,例如:
<li [#if c.keywords?exists] keywords="${c.keywords}"
[/#if] path="${c.path}" onclick="clickClient(this.path,this.keywords);">
<a href="javascript:void(0)" style="cursor: pointer;"><span>${c.name}</span>
</a>
</li>
clickClient這個(gè)方法不是真正要調(diào)用的方法,只是一個(gè)過(guò)渡方法而已。
clickClient = function(path,keywords){
//解析分解keywords開(kāi)始
keywords = keywords.replace("username","${user.username}");
var suffIndex=keywords.indexOf("http");
var prefix = keywords.substr(0,suffIndex-1);
var suffix = keywords.substr(suffIndex-1);
var preIndex=prefix.lastIndexOf("|")+1;
var year = prefix.substr(preIndex);
prefix = prefix.substr(0,preIndex);
//解析分解keywords結(jié)束
//合并url
keywords = prefix+$("#year").val()+suffix;
clientInvoke(path,keywords);
}
在這個(gè)方法,最終實(shí)現(xiàn)的目的是調(diào)用clientInvoke方法,而傳進(jìn)去的參數(shù)keywords是變化,要經(jīng)過(guò)一定的處理,首先把${user.username}把user替換掉,在js代碼中,即使含有EL表達(dá)式也會(huì)動(dòng)態(tài)的解析出來(lái),這點(diǎn)就實(shí)現(xiàn)了動(dòng)態(tài)的調(diào)用當(dāng)前用戶名的目標(biāo)。當(dāng)2014這個(gè)年度也要設(shè)置為動(dòng)態(tài)的,并且是可以切換的,那就要把該字符串分解成三個(gè)部分:
前綴:efmis://|efmfj|username|2200|0||
年度:2014
后綴:|http://10.20.1.54:7001/cssServerportal222012/|||||02
把年度放在一個(gè)select下拉菜單中,當(dāng)觸動(dòng)clickClient方法時(shí),即時(shí)的從當(dāng)前option中取出年度,然后和前綴后綴拼接起來(lái),這樣就是實(shí)現(xiàn)了年度可變化的靈活性。
年度切換
<select id="year" onclick="switchYear(this.value);">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014" selected="selected">2014</option>
<option value="2015">2015</option>
</select>
這時(shí)候會(huì)有一個(gè)問(wèn)題,當(dāng)年度切換之后,比如默認(rèn)的2014,切換到2013之后,如果刷新頁(yè)面,就會(huì)重新變回默認(rèn)的2014,這個(gè)該怎么辦呢?刷新之后所有的變量都重新加載了,所以設(shè)置全局變量這個(gè)方法就行不通了,那么我們要問(wèn),什么東西是不隨著頁(yè)面刷新而變化并且我們很容易進(jìn)行操作的?看到本文的標(biāo)題我想所有人都會(huì)知道了:cookie!
cookie是保存在本地的資源,可以隨存隨取,在記住密碼的功能上起了極大的作用。這時(shí)候我們就利用cookie,把年度存在cookie中。每次加載頁(yè)面時(shí),判斷cookie是否存在,如果存在就從中取出放入select,如果不存在就從select中取出,存入cookie。
$(document).ready(function(){
if(getCookie("Year")==null){//不存在該cookie,放進(jìn)去
setCookie("Year",$("#year").val());
}else{
//已經(jīng)存在該cookie,則從中取出
$("#year").val(getCookie("Year"));
}
});
//設(shè)置cookie
function setCookie(name,value)
{
//var Days = 30;
//var exp = new Date();
//exp.setTime(exp.getTime() + 365*24*60*60*1000);
document.cookie = name + "="+ escape (value);
// + ";expires=" + exp.toGMTString();
}
//讀取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
在切換年度的時(shí)候,cookie的值當(dāng)然也要發(fā)生變化:
switchYear=function(year){
setCookie("Year",year);
}
根據(jù)用戶的要求,一定要讓2014作為默認(rèn)。每次切換完cookie操作完成之后,關(guān)閉瀏覽器,重新打開(kāi)登錄進(jìn)入首頁(yè),年度依然要是2014,而不是上次切換的那個(gè)值。所以我們就不需要設(shè)定cookie的過(guò)期時(shí)間了,只需要讓其在瀏覽器關(guān)閉后自動(dòng)清除即可。
當(dāng)然了,如果期望瀏覽器長(zhǎng)期記住cookie,就設(shè)定過(guò)期時(shí)間,setCookie中的注釋代碼正是設(shè)置過(guò)期時(shí)間用的。感興趣的可以研究下。
首先從后臺(tái)配置一個(gè)參數(shù),放到一個(gè)字段里,該字段叫做keywords,這個(gè)參數(shù)的值叫做efmis://|efmfj|username|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012/|||||02,姑且不去管這個(gè)值有什么含義,相信很多人都遇到過(guò)比這個(gè)更復(fù)雜的字符串。后臺(tái)配置以后,前臺(tái)可以這么來(lái)顯示:${tag_bean.keywords},可以肯定,無(wú)論后臺(tái)配置成什么,前臺(tái)一定會(huì)原定不變的顯示出來(lái),第一個(gè)問(wèn)題出現(xiàn):在username這個(gè)位置上,嵌入的是當(dāng)前登錄用戶的用戶名,必須是動(dòng)態(tài)代碼。難道要寫成efmis://|efmfj|${username}|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012?這樣寫跟期望可有所不同,它會(huì)原樣不變的顯示出來(lái),并不會(huì)把EL表達(dá)式翻譯成動(dòng)態(tài)代碼,暫時(shí)不考慮能不能使用EL表達(dá)式的嵌套,很顯然不能直接使用,一定要要處理這么一個(gè)字符串。
這個(gè)字符串是要作為一個(gè)js方法的參數(shù)的,例如:
復(fù)制代碼 代碼如下:
<li [#if c.keywords?exists] keywords="${c.keywords}"
[/#if] path="${c.path}" onclick="clickClient(this.path,this.keywords);">
<a href="javascript:void(0)" style="cursor: pointer;"><span>${c.name}</span>
</a>
</li>
clickClient這個(gè)方法不是真正要調(diào)用的方法,只是一個(gè)過(guò)渡方法而已。
復(fù)制代碼 代碼如下:
clickClient = function(path,keywords){
//解析分解keywords開(kāi)始
keywords = keywords.replace("username","${user.username}");
var suffIndex=keywords.indexOf("http");
var prefix = keywords.substr(0,suffIndex-1);
var suffix = keywords.substr(suffIndex-1);
var preIndex=prefix.lastIndexOf("|")+1;
var year = prefix.substr(preIndex);
prefix = prefix.substr(0,preIndex);
//解析分解keywords結(jié)束
//合并url
keywords = prefix+$("#year").val()+suffix;
clientInvoke(path,keywords);
}
在這個(gè)方法,最終實(shí)現(xiàn)的目的是調(diào)用clientInvoke方法,而傳進(jìn)去的參數(shù)keywords是變化,要經(jīng)過(guò)一定的處理,首先把${user.username}把user替換掉,在js代碼中,即使含有EL表達(dá)式也會(huì)動(dòng)態(tài)的解析出來(lái),這點(diǎn)就實(shí)現(xiàn)了動(dòng)態(tài)的調(diào)用當(dāng)前用戶名的目標(biāo)。當(dāng)2014這個(gè)年度也要設(shè)置為動(dòng)態(tài)的,并且是可以切換的,那就要把該字符串分解成三個(gè)部分:
前綴:efmis://|efmfj|username|2200|0||
年度:2014
后綴:|http://10.20.1.54:7001/cssServerportal222012/|||||02
把年度放在一個(gè)select下拉菜單中,當(dāng)觸動(dòng)clickClient方法時(shí),即時(shí)的從當(dāng)前option中取出年度,然后和前綴后綴拼接起來(lái),這樣就是實(shí)現(xiàn)了年度可變化的靈活性。
復(fù)制代碼 代碼如下:
年度切換
<select id="year" onclick="switchYear(this.value);">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014" selected="selected">2014</option>
<option value="2015">2015</option>
</select>
這時(shí)候會(huì)有一個(gè)問(wèn)題,當(dāng)年度切換之后,比如默認(rèn)的2014,切換到2013之后,如果刷新頁(yè)面,就會(huì)重新變回默認(rèn)的2014,這個(gè)該怎么辦呢?刷新之后所有的變量都重新加載了,所以設(shè)置全局變量這個(gè)方法就行不通了,那么我們要問(wèn),什么東西是不隨著頁(yè)面刷新而變化并且我們很容易進(jìn)行操作的?看到本文的標(biāo)題我想所有人都會(huì)知道了:cookie!
cookie是保存在本地的資源,可以隨存隨取,在記住密碼的功能上起了極大的作用。這時(shí)候我們就利用cookie,把年度存在cookie中。每次加載頁(yè)面時(shí),判斷cookie是否存在,如果存在就從中取出放入select,如果不存在就從select中取出,存入cookie。
復(fù)制代碼 代碼如下:
$(document).ready(function(){
if(getCookie("Year")==null){//不存在該cookie,放進(jìn)去
setCookie("Year",$("#year").val());
}else{
//已經(jīng)存在該cookie,則從中取出
$("#year").val(getCookie("Year"));
}
});
//設(shè)置cookie
function setCookie(name,value)
{
//var Days = 30;
//var exp = new Date();
//exp.setTime(exp.getTime() + 365*24*60*60*1000);
document.cookie = name + "="+ escape (value);
// + ";expires=" + exp.toGMTString();
}
//讀取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
在切換年度的時(shí)候,cookie的值當(dāng)然也要發(fā)生變化:
復(fù)制代碼 代碼如下:
switchYear=function(year){
setCookie("Year",year);
}
根據(jù)用戶的要求,一定要讓2014作為默認(rèn)。每次切換完cookie操作完成之后,關(guān)閉瀏覽器,重新打開(kāi)登錄進(jìn)入首頁(yè),年度依然要是2014,而不是上次切換的那個(gè)值。所以我們就不需要設(shè)定cookie的過(guò)期時(shí)間了,只需要讓其在瀏覽器關(guān)閉后自動(dòng)清除即可。
當(dāng)然了,如果期望瀏覽器長(zhǎng)期記住cookie,就設(shè)定過(guò)期時(shí)間,setCookie中的注釋代碼正是設(shè)置過(guò)期時(shí)間用的。感興趣的可以研究下。
相關(guān)文章
js中setTimeout的妙用--防止循環(huán)超時(shí)
本文主要介紹了使用setTimeout實(shí)現(xiàn)防止循環(huán)超時(shí)的方法,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹,原型模式指使用原型實(shí)例來(lái)拷貝、創(chuàng)建新的可定制的對(duì)象,新建的對(duì)象,不需要知道原對(duì)象創(chuàng)建的具體過(guò)程,需要的朋友可以參考下2014-12-12javascript學(xué)習(xí)總結(jié)之js使用技巧
本篇文章給大家分享javascript學(xué)習(xí)總結(jié)之js使用技巧,都是精華喔~小伙伴快來(lái)學(xué)習(xí)吧。2015-09-09javascript 像素拼圖實(shí)現(xiàn)代碼
非常不錯(cuò)的像素拼圖效果2009-04-04原生JS和jQuery操作DOM對(duì)比總結(jié)
這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對(duì)比總結(jié),文中總結(jié)了很多的對(duì)比,相信對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01