A small benefit of using js to operate cookies

To clarify this problem, we must start from scratch.

First, configure a parameter in the background and put it in a field named keywords. The value of this parameter is efmis: // | efmfj | username | 2200 | 0 | 2014 | http: // 10.20.1.54: 7001/cssServerportal222012/| 02, whatever the meaning of this value, I believe many people have encountered more complex strings than this one. After the background configuration, the foreground can be displayed as follows: $ {tag_bean.keywords}. No matter what the background configuration is, the foreground will be displayed unchanged. The first problem occurs: the username is embedded in the username of the currently logged-on user and must be a dynamic code. Do you want to write efmis: // | efmfj |$ {username} | 2200 | 0 | 2014 | http: // 10.20.1.54: 7001/cssServerportal222012? In this way, the write is different from the expected one. It will be displayed unchanged and will not translate the EL expression into dynamic code. At present, it does not consider whether the nested EL expression can be used, obviously it cannot be used directly. You must process such a string.

This string is used as a parameter of a js method, for example:

[Html]
<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>

<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> the clickClient method is not a method to be called, but a transitional method.

[Javascript]
ClickClient = function (path, keywords ){
// Parse and decompose keywords
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 );
// Parse and deploy keywords
// Merge URLs
Keywords = prefix + $ ("# year"). val () + suffix;
ClientInvoke (path, keywords );
}

ClickClient = function (path, keywords ){
// Parse and decompose keywords
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 );
// Parse and deploy keywords
// Merge URLs
Keywords = prefix + $ ("# year"). val () + suffix;
ClientInvoke (path, keywords );
}
In this method, the final purpose is to call the clientInvoke method, and the passed parameter keywords is a change. After some processing, first set $ {user. username} is used to replace the user. In js Code, even if the EL expression is contained, the user will be dynamically parsed. This achieves the goal of dynamically calling the current user name. When 2014 is set to dynamic and can be switched, the string should be divided into three parts:

Prefix: efmis: // | efmfj | username | 2200 | 0 |

Year: 2014

Suffix: | http: // 10.20.1.54: 7001/cssServerportal222012/| 02

Put the year in a select drop-down menu. When the clickClient method is triggered, the year is immediately retrieved from the current option and then spliced with the prefix suffix, in this way, the annual changeable flexibility is achieved.

[Html]
Annual Switch
<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>

Annual Switch
<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> at this time, there will be a problem. After the annual switch, such as the default 2014, after switching to 2013, if the page is refreshed, it will be changed back to the default 2014. What should I do? After refreshing, all the variables are reloaded, so the method for setting global variables will not work, so we have to ask, what does not change with page refresh and is easy to operate? I think everyone will know the title of this article: cookie!

Cookie is a local resource that can be stored as you go. It plays a significant role in remembering passwords. At this time, we will use cookies to store annual cookies. Each time a page is loaded, the system checks whether the cookie exists. If the cookie exists, it is extracted and put into the select statement. If the cookie does not exist, it is retrieved from the select statement and saved to the cookie.

 

[Javascript]
$ (Document). ready (function (){
If (getCookie ("Year") = null) {// This cookie does not exist, put it in
SetCookie ("Year", $ ("# year"). val ());
} Else {
// If the cookie already exists
$ ("# Year"). val (getCookie ("Year "));
}
});
// Set 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 ();
}
// Read cookies
Function getCookie (name)
{
Var arr, reg = new RegExp ("(^ |)" + name + "= ([^;] *) (; | $ )");
If (arr = document. cookie. match (reg) return unescape (arr [2]);
Else return null;
}

$ (Document). ready (function (){
If (getCookie ("Year") = null) {// This cookie does not exist, put it in
SetCookie ("Year", $ ("# year"). val ());
} Else {
// If the cookie already exists
$ ("# Year"). val (getCookie ("Year "));
}
});
// Set 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 ();
}
// Read cookies
Function getCookie (name)
{
Var arr, reg = new RegExp ("(^ |)" + name + "= ([^;] *) (; | $ )");
If (arr = document. cookie. match (reg) return unescape (arr [2]);
Else return null;
}
When switching the Year, the cookie value also needs to change:

[Javascript]
SwitchYear = function (year ){
SetCookie ("Year", year );
}

SwitchYear = function (year ){
SetCookie ("Year", year );
} According to user requirements, 2014 must be used as the default value. After switching the cookie, close the browser and log on to the homepage again. The annual value is still 2014, instead of the value of the previous switch. Therefore, we do not need to set the cookie expiration time. We only need to enable the cookie to be automatically cleared after the browser is closed.

Of course, if you want your browser to remember cookies for a long time, set the expiration time. The annotation code in setCookie is used to set the expiration time. If you are interested, you can study it.