16 Cookie Operation

cookie used to store user information web page.

First, what is a Cookie?

Cookie is some of the data stored in a text file on your computer in.

When the web server sends the web page to the browser after the connection is closed, the server does not record user information.

Cookie role is to solve the "how to record the client's user information":

• When a user accesses a web page, his name can be recorded in a cookie.
• When a user accesses the page, you can read the user access records in a cookie.

Cookie the name / value pairs are stored as follows:

username=John Doe

When a browser requests a web page from the server, cookie belonging to the page will be added to the request. Services end users to obtain information in this way.

Second, the use of JavaScript to create a Cookie

JavaScript can use the document.cookie property to create, read, and delete cookie.

JavaScript, the cookie is created as shown below:

document.cookie="username=John Doe";

You can also add a cookie expiration time (in UTC or GMT time). By default, cookie deleted when the browser is closed:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

You can use the path parameter tells the browser the cookie path. By default, cookie belongs to the current page.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Third, read the Cookie using JavaScript

In JavaScript, you can use the following code to read cookie:

var x = document.cookie;

Note: document.cookie string will return all the way cookie, type format: cookie1 = value; cookie2 = value; cookie3 = value;

The use of JavaScript to modify Cookie

In JavaScript, modifying cookie similar to creating a cookie, as follows:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

The old cookie will be overwritten.

Fifth, use JavaScript to delete Cookie

Delete the cookie is very simple. You only need to set expires parameter, as shown here, is set to Thu, 01 Jan 1970 00:00:00 GMT for the previous time:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Note, do not have to specify a value when you delete the cookie.

Cookie string

document.cookie property looks like an ordinary text string, in fact it is not.

Even if you write a complete cookie string document.cookie, when you re-read the cookie information, cookie information is the name / value pairs in the form of display.

If you set a new cookie, the old cookie will not be overwritten. The new cookie will be added to document.cookie in, so if you re-read document.cookie, you will obtain the data shown below:

cookie1=value; cookie2=value;

If you need to find a specific cookie value, you must create a JavaScript function to find the value of the cookie in the cookie string.

Five, JavaScript Cookie instances

In the following example, we will create a cookie to store visitor name.

First of all, visitors to the web page, he will be asked to fill in their name. The name will be stored in a cookie.

The next time you access the page a visitor, he will see a welcome message.

In this example we will create three JavaScript functions:

1. Set cookie value function
2. Gets the value of the cookie function
3. Cookie value detection function

1, set the value of the cookie function

First, we create a function for storing the visitor's name:

This function sets the cookie name, cookie value, cookie expiration time.

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

Function Analysis:

The above function parameters, cookie name for the cname, cookie value cvalue, and set the expiration time expires cookie.

2, the value of the cookie obtain function

Then, we create a function that returns the user to specify the value of the cookie:

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

Function Analysis:

Cookie parameter name is cname.

Create a text variable is used to retrieve the specified cookie: cname + "=".

Document.cookie string using semicolons to separate, and assigned to a string array divided ca (ca = document.cookie.split ( ';')).

Ca loop array (i = 0; i <ca.length; i ++), and then reads each value in the array and remove trailing spaces (c = ca [i] .trim ()).

If you find a cookie (c.indexOf (name) == 0), returns the value of the cookie (c.substring (name.length, c.length).

If you do not find the cookie, is returned "."

3, the function of the detected value of the cookie

Finally, we can create a function to detect if the cookie is created.

If you set a cookie, it will display a greeting message.

If you do not set a cookie, it will display a pop asking for the name of the visitor, and the visitor will call setCookie function name stored 365 days:

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}