Record user query information based on jquery operation Cookie

This is a list of cookie data generation,

Each click of the query stores a domain name and puts the last query's domain name at the top. This example stores up to 10, and you can set it according to your own situation.

Let's take a look at how it is achieved.

First write a cookie to operate the JS file as follows

Code

  
  

	  
   
   
 
    
 
     
The code is as follows
 
     
Copy Code
 
    
 
    
 
     
function GetID (ID) {
return (typeof id = = ' string ')? document.getElementById (ID): ID
};
function Getoffsettop (EL, p) {
var _t = el.offsettop;
while (el = el.offsetparent) {
if (el = = p) break;
_t + + El.offsettop
}
Return _t
};
function Getoffsetleft (EL, p) {
var _l = El.offsetleft;
while (el = el.offsetparent) {
if (el = = p) break;
_l + + El.offsetleft
}
Return _l
};

var currentinput = null;

function Boxshow (e) {
var input = e;
if (!input.id) {
input = E.target? E.target:e.srcelement;
}
Currentinput = input;
Fillurls ("site");
var box = GetID ("ALLSITESBOXHDL");
if (Box.style.display = = ' block ' && currentinput.id = = input.id) {
Return
}
Box.style.left = (Getoffsetleft (input)) + ' px ';
Box.style.top = (Getoffsettop (input) + (input.offsetheight-1)) + ' px ';
Box.style.width = (input.offsetwidth-4) + ' px ';
Box.style.display = ' block ';
}
function Boxshowurls (e) {
Boxshow (e);
}
Function Inputsetvalue (val) {
var obj = currentinput;
Obj.value = val;
if (obj.getattribute (' url ') = = ' true ') {
var tags = document.getelementsbytagname (' input ');
for (var i = 0; i < tags.length; i++) {
if (tags[i].getattribute (' url ') = = ' true ' && tags[i]!= obj) {
Tags[i].value = val;
}
}
}
Boxhide ();
}
When you delete it, you can delete it by passing in a value that you want to delete
function Delallsitesvalue (value) {
var allsites = $.cookie ("site");
Allsites = Allsites.replace (value + "|", "");
$.cookie ("Site", Allsites, {expires:7});
Fillurls ("site");
}
function Boxhide () {
if (GetID ("ALLSITESBOXHDL")) {
GetID ("Allsitesboxhdl"). Style.display = ' None ';
}
}
Load List
function Fillurls (cookiename) {
var urls = $.cookie (cookiename);
var html = "";
if (URL) {
var urllist = urls.split (' | ');
var forlength = 0;
var Stringcookie;
for (var i = urllist.length-1 i >= 0; i--) {
var textval = urllist[i];
if ($.trim (textval)!= "" && $.trim (textval)!= "undefined") {
HTML + + "<li class=" lis "><a href=" javascript:inputsetvalue (' + Textval + '); " > "+ textval + </a></li><br/>";
Forlength = forlength + 1;
if (Forlength > 10) {
$.cookie ("Site", Stringcookie, {expires:7});
Break
} else {
Stringcookie = textval + "|" + Stringcookie;
}
}
}
} else {
html = "<li> no record </li>"
}
GetID ("Allsitesboxcontent"). InnerHTML = html;
}
function Closeime (e) {
var obj = e.target? E.target:e.srcelement;
Obj.style.imeMode = ' disabled ';
}

function Onpaste (e) {
var obj = e.target? E.target:e.srcelement;
SetTimeout ("movehttp (' + obj.id +") ", 100);
}
function Movehttp (ID) {
var val = getid (id). value;
val = val.replace ("http://", "");
if (val[val.length-1] = = '/') {
val = val.substring (0, val.length-1);
}
GetID (id). value = val;
}
function OnKeyup (e) {
var obj = e.target? E.target:e.srcelement;
SetTimeout ("addinput (' + obj.id +") ", 200);
}
function Addinput (ID) {
var obj = getid (ID);
If an input without true does not execute
if (obj.getattribute (' url ') = = ' true ') {
if (obj.value.indexOf) ('. ') > 0) {
Obj.value = Obj.value.replace ('. ', '.');
}
var tags = document.getelementsbytagname (' input ');
for (var i = 0; i < tags.length; i++) {
if (tags[i].getattribute (' url ') = = ' true ' && tags[i]!= obj) {
Tags[i].value = Obj.value;
}
}
}
}

function Init () {
$ ("#allSitesBoxHdl") [0].style.display = ' none ';
$ (": Text"). each (function () {
$ (this). Bind ("KeyUp", OnKeyup);
$ (this). Bind ("MouseDown", boxshowurls);
$ (this). Bind ("Mouseout", boxhide);
$ (this). Bind ("Focus", closeime);
$ (this). Bind ("Paste", onpaste);
$ (this). Bind ("Mouseout", boxhide);
$ (this) [0].setattribute (' AutoComplete ', ' off ');
});

Remove cookies
var icpsite = $.cookie ("site");
if (icpsite) {
To remove a cookie if it is not empty, give the current box
Icpsite = Icpsite.split (' | ') [0];
$ ("#site"). Val (Icpsite);
}
}
 
    
 
   
  
  

Here is also an effect, which is to enter the values of multiple input boxes at the same time, as shown below

If the input box to use such an effect as long as add a property to Url= "True" on the line, so easy to operate strong, want to give that box plus the effect of this attribute, do not want to add the direct without url= "true"

It's OK.

Add the following code to the interface that uses this effect

  
   
   

	  
   
    
    
 
     
 
      
The code is as follows
 
      
Copy Code
 
     
 
     
 
      
<div style= "Display:none; Position:absolute "id=" ALLSITESBOXHDL "class=" Classlist "
            Onmouseover= "this.style.display= ' Block" "onmouseout=" this.style.display= ' None ' ">
            <ul id= "Allsitesboxcontent" >
            </ul>
        </div>
   <script type= "Text/javascript" >            Init ();</script>
 
     
 
    
  
   
   
In addition to the JS directly placed in a JS file, the reference in the line

How does the Drop-down list load? Look at one of the following methods, you know.

Load List

  
  

	  
   
   
 
    
 
     
  code is as follows 
 
     
 copy code 
 
    
 
    
 
     
function Fillurls (cookiename) {
 var urls = $.cookie (cookiename); 
 var html = ""; 
 if (URL) {
 var urllist = urls.split (' | '); 
 var forlength = 0; 
 Var Stringcookie; 
 for (var i = urllist.length-1 i >= 0; i--) {
 var textval = urllist[i]; 
 if ($.trim (textval)!= "" && $.trim (textval)!= "undefined") {
 HTML + + <li class= "lis ><a href=" Javas Cript:inputsetvalue (' "+ Textval +"); " > "+ textval + </a></li><br/>"; 
 Forlength = forlength + 1; 
 if (Forlength > 10) {//Here I only load 10, everyone can adjust according to their own situation 
 $.cookie ("Site", Stringcookie, {expires:7}); 
 Break 
} else {//If 10 is exceeded, the last 10 
 Stringcookie = textval + "|" + Stringcookie; 
} 
} 
} 
} else {
 HTML + <li> no record </li> ' 
} 
 GetID (' allsitesboxcontent '). InnerHTML = html; 
} 
 
    
 
   
  
  

After we've done this, we just need to store cookies when we click the query, and look at the following method

Manipulating Cookie Classes

  
   
   

	  
   
    
    
 
     
 
      
The code is as follows
 
      
Copy Code
 
     
 
     
 
      
function Setcookie (name, value) {

var Oldcookie = $.cookie (name);
if (Oldcookie = = null) {
$.cookie (name, value, {expires:7});
} else {
if ($.cookie (name). IndexOf (value) = = 1) {
$.cookie (name, Oldcookie + "|" + value, {expires:7});
} else {
$.cookie (name, Oldcookie.replace (value, "") + "|" + value, {expires:7});
}
}
Fillurls (name);
}
 
     
 
    
  
   
   
Write this when called

  
   
   

	  
   
    
    
 
     
 
      
The code is as follows
 
      
Copy Code
 
     
 
     
 
      
Setcookie ("Site", strdomin);
 
     
 
    
  
   
   
All right, if you want to see the real effect, come on.

to conduct specific tests.

Code writing is not very good, I hope that we have to make more suggestions, we modify the corresponding to strive for more perfect.

Cookies are stored by the client, one and only access to the same domain name cookies, subdomains can be accessed between each other, as long as add
Domain property on the line, stored in the following methods

$.cookie ("Domain", value, {expires:7, domain: "7c.com"});

Take the time to write directly $.cookie ("domain"), as long as the sub domain name, all such calls, so that you can achieve the domain name of the cookie sharing function.

the effective use of cookies will bring our site n more unexpected effects and functions, we communicate with the next