Use of JavaScript BOM Cookie

JavaScript Cookie

Cookie is a small data text file stored on your computer. When the Web server sends the page to the browser, the connection is closed, the server will forget all the content users. Cookie invention is to solve the problem of "how to remember user information":
When a user accesses the page, his / her name may be stored in a cookie.
The next time the user visits the page, cookie "remembers" his / her name.
Cookie is saved in the form of keys, such as:

username = John Doe

When a browser requests a page from the server, cookie belonging to the page will be added to the request. In this way, the server to obtain the necessary data to "remember" information about the user.
If your browser is closed Cookie local support, the following examples are invalid.

Use JavaScript to create Cookie

JavaScript document.cookie property can be used to create, read, and delete cookie. The use of JavaScript, you can create a cookie like this:

document.cookie = "username=John Doe";

You can also add an expiration date (in UTC units of time). By default, delete the cookie when the browser is closed:

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

Use the path parameter, you can tell the browser which path cookie belongs. By default, cookie belongs to the current page.

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

Read Cookie using JavaScript

The use of JavaScript, cookie can be read like this:

var x = document.cookie;

All document.cookie returns a cookie string, such as: cookie1 = value; cookie2 = value; cookie3 = value;

Change the Cookie using JavaScript

The use of JavaScript, you can create the same change as cookie cookie:

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

The old cookie is overwritten.

Delete Cookie using JavaScript

Delete the cookie is very simple. When you delete a cookie, you do not have to specify the value of the cookie. Simply expires parameter is set delivery date:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

You should delete the custom cookie path in order to ensure the correct cookie. If you do not specify a path, some browsers will not allow you to delete the cookie.

Cookie string

document.cookie property look like common text string. but it is not the truth. Even if you will write a complete cookie string document.cookie, when you read it again, you can only see its name - value pairs. If you set a new cookie, it will not overwrite older cookie. The new cookie is added to document.cookie, so if you read document.cookie again, you'll get something like: cookie1 = value; cookie2 = value ;
if you want to find a specific cookie value, you must write a JavaScript function to cookie cookie value search string.

JavaScript Cookie example

In the following example, we will create a stored visitor names cookie. Visitors first time landing pages will ask him / her to fill in his / her name. The name is then stored in a cookie. The next time a visitor arrives at the same page, he / she will receive a welcome message. In this example, we will create three JavaScript functions:

A function value setting cookie
Gets the value of the cookie function
Function checks for the value of the cookie
Cookie settings function

First, we create a function name is stored in the visitor's cookie variable:

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

Example Description:
parameter of the function is the name of the cookie (cname), the value of the cookie (cValue) and the number of days before the cookie expires (exdays). This function sets the cookie by cookiename, cookie value and the string concatenation expires.
Cookie acquisition functions
then we create a function return value of the specified cookie:

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

Function:
the cookiename as a parameter (cname). Use text to be searched (cname + "=") create a variable (name). Decoding cookie string cookie handling with special characters, such as '$' on the split document.cookie semicolon in the array named ca (ca = decodingCookie.split ( ';' )). Ca circulated through the array (i = 0; i <ca.length ; i ++), and reads out each value c = ca [i]). If the cookie (c.indexOf (name) == 0 ) is found, the value of the cookie (c.substring (name.length, c.length)) is returned. If you can not find the cookie, then return "."
Cookie check function
Finally, we create a function to check whether a cookie. If you set a cookie, it will display the greeting. If the cookie is not set, it will display a prompt box appears asking the user's name, and by calling the function setCookie the user name cookie store 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);
    }
  }
}

All code is implemented together

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

The above example checkCookie () function is run when the page loads.
More details Cookie technical articles