Examples of cookie usages in jquery (GET, save, delete, etc.) _jquery

This example describes the use of cookies in jquery. Share to everyone for your reference, specific as follows:

Cookies have the specified cookie action class in jquery, let me first introduce some of the questions we have about using cookies to manipulate classes, and then introduce the correct way to use them.

Incorrect value occurred while using jquery to manipulate cookies:
The result is that cookies have four different properties:
Name, content, domain, path

$.cookie (' The_cookie '); Read Cookie 
$.cookie (' The_cookie ', ' the_value ');//Storage Cookie 
$.cookie (' The_cookie ', ' The_value ', {expires:7} ); Store a cookie with a 7-day term 
$.cookie (' The_cookie ', ', {Expires:-1});//Delete Cookie

Use:

Copy Code code as follows:

$.cookie ("Currentmenuid", MenuID);

The domain and path were not specified.

All different cookies are generated when the domain and path are different

Copy Code code as follows:

$.cookie ("Currentmenuid");

A problem occurs when a value is taken.

So

Copy Code code as follows:

$.cookie ("Currentmenuid", "MenuID", {path: "/"});

to overwrite. A cookieid corresponds to a value in the same field.

Now let's take a look at an example

The path setting for cookies requires that if you do not set path: '/', path will be automatically set up according to the directory [such as: Http://www.xxx.com/user/,path will be set to '/user ']

$.extend ({/** 1) Sets the value of the cookie to set the value of the name variable to value example $.cookie (' name ', ' value ');  
2. Create a new cookie including the expiration path domain name example $.cookie (' name ', ' value ', {expires:7, path: '/', Domain: ' jquery.com ', secure:true}); 
3. New Cookie Example $.cookie (' name ', ' value '); 
4. Delete a cookie example $.cookie (' name ', null); 
5. Take a cookie (name) value to myvar var account= $.cookie (' name '); **/cookiehelper:function (name, value, options) {if (typeof value!= ' undefined ') {//name and value given, set Cookie options = Options | | 
      {}; 
        if (value = = null) {value = '; 
      Options.expires =-1; 
      } var expires = '; 
        if (Options.expires && (typeof options.expires = = ' Number ' | | | options.expires.toUTCString)) {var date; 
          if (typeof options.expires = = ' number ') {date = new date (); 
        Date.settime (Date.gettime () + (Options.expires * 24 * 60 * 60 * 1000)); 
        else {date = Options.expires; 
 }       expires = '; Expires= ' + date.toutcstring (); Use expires attribute, Max-age isn't supported by IE} var path = Options.path? '; 
      Path= ' + options.path: '; var domain = Options.domain? '; 
      Domain= ' + options.domain: '; var secure = options.secure? '; 
      Secure ': '; 
    Document.cookie = [name, ' = ', encodeURIComponent (value), expires, path, domain, Secure].join ('); 
      else {//only name given, get cookie var cookievalue = null; 
        if (document.cookie && document.cookie!= ') {var cookies = Document.cookie.split (';'); 
          for (var i = 0; i < cookies.length i++) {var cookie = Jquery.trim (Cookies[i]); 
          Does this cookie string begin with the name we want? if (cookie.substring (0, name.length + 1) = = (name + ' = ')) {cookievalue = decodeURIComponent (cookie.substring 
            (Name.length + 1)); 
          Break }} return CookieValue;

 } 
  } 
});

jquery action Cookie Records user query information

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 see how it's going to work.

First write a cookie to operate the JS file as follows

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.offsetto
P} return _t}; function Getoffsetleft (EL, p) {var _l = El.offsetleft; while (el = el.offsetparent) {if (el = = p) break; _l = = El.offset
Left} 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.g Etattribute (' url ') = = ' true ') {var tags = document.getelementsbytagname (' input '); for (var i = 0; i < tags.length; i++) {if (tags[i].getat
Tribute (' url ') = = ' true ' && tags[i]!= obj) {tags[i].value = val;}}
} boxhide (); ///delete, pass in a value to be deleted 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 CL ass= "Lis" ><a href= "javascript:inputsetvalue (' + Textval +"); "
> "+ textval + </a></li><br/>"; Forlength = Forlength+ 1; if (Forlength >) {$.cookie ("site", Stringcookie, {expires:7}); break;} else {Stringcookie = textval + "|" + St
Ringcookie;
}} 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 ("Keyu
P ", 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 the cookie var icpsite = $.cookie ("site"); if (icpsite) {//Remove cookie is not empty then 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

<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

function Fillurls (cookiename) {
var url = $.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=" Jav Ascript: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

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

Copy Code code as follows:

Setcookie ("Site", strdomin);

All right, function complete.

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 the domain attribute on the line, storage methods are as follows

Copy Code code as follows:

$.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 exchange

More about the jquery operation cookie related content to view the site topic: "jquery cookie Operation Tips Summary"

I hope this article will help you with the jquery program design.