Javascript to use cookies to

JavaScript and Cookies

Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages. For example, one user registration ends after completing many pages. But how to maintain users’ session information across all the web pages.

In many situations, using cookies is the most efficient method of remembering and tracking preferences, purchases, commissions, and other information required for better visitor experience or site statistics.

How It Works ?

Your server sends some data to the visitor’s browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor’s hard drive. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/remembers what was stored earlier.

Cookies are a plain text data record of 5 variable-length fields −

• Expires − The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
• Domain − The domain name of your site.
• Path − The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.
• Secure − If this field contains the word «secure», then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
• Name=Value − Cookies are set and retrieved in the form of key-value pairs

Cookies were originally designed for CGI programming. The data contained in a cookie is automatically transmitted between the web browser and the web server, so CGI scripts on the server can read and write cookie values that are stored on the client.

JavaScript can also manipulate cookies using the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookies that apply to the current web page.

Storing Cookies

The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks like this.

document.cookie = "key1 = value1;key2 = value2;expires = date";

Here the expires attribute is optional. If you provide this attribute with a valid date or time, then the cookie will expire on a given date or time and thereafter, the cookies’ value will not be accessible.

Note − Cookie values may not include semicolons, commas, or whitespace. For this reason, you may want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape() function when you read the cookie value.

Example

Try the following. It sets a customer name in an input cookie.

      
Enter name:  
   

Output

Now your machine has a cookie called name. You can set multiple cookies using multiple key = value pairs separated by comma.

Reading Cookies

Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the cookie. So you can use this string whenever you want to access the cookie. The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.

You can use strings’ split() function to break a string into key and values as follows −

Example

Try the following example to get all the cookies.

      
 
click the following button and see the result:
 
   

Note − Here length is a method of Array class which returns the length of an array. We will discuss Arrays in a separate chapter. By that time, please try to digest it.

Note − There may be some other cookies already set on your machine. The above code will display all the cookies set on your machine.

Setting Cookies Expiry Date

You can extend the life of a cookie beyond the current browser session by setting an expiration date and saving the expiry date within the cookie. This can be done by setting the ‘expires’ attribute to a date and time.

Example

Try the following example. It illustrates how to extend the expiry date of a cookie by 1 Month.

Output

Deleting a Cookie

Sometimes you will want to delete a cookie so that subsequent attempts to read the cookie return nothing. To do this, you just need to set the expiry date to a time in the past.

Example

Try the following example. It illustrates how to delete a cookie by setting its expiry date to one month behind the current date.

Источник

JavaScript Cookies

When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to «remember» information about users.

None of the examples below will work if your browser has local cookies support turned off.

Create a Cookie with JavaScript

JavaScript can create, read, and delete cookies with the document.cookie property.

With JavaScript, a cookie can be created like this:

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed:

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.

Read a Cookie with JavaScript

With JavaScript, cookies can be read like this:

document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;

Change a Cookie with JavaScript

With JavaScript, you can change a cookie the same way as you create it:

The old cookie is overwritten.

Delete a Cookie with JavaScript

Deleting a cookie is very simple.

You don’t have to specify a cookie value when you delete a cookie.

Just set the expires parameter to a past date:

You should define the cookie path to ensure that you delete the right cookie.

Some browsers will not let you delete a cookie if you don’t specify the path.

The Cookie String

The document.cookie property looks like a normal text string. But it is not.

Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it.

If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like:

cookie1 = value; cookie2 = value;

Display All Cookies Create Cookie 1 Create Cookie 2 Delete Cookie 1 Delete Cookie 2

If you want to find the value of one specified cookie, you must write a JavaScript function that searches for the cookie value in the cookie string.

JavaScript Cookie Example

In the example to follow, we will create a cookie that stores the name of a visitor.

The first time a visitor arrives to the web page, he/she will be asked to fill in his/her name. The name is then stored in a cookie.

The next time the visitor arrives at the same page, he/she will get a welcome message.

For the example we will create 3 JavaScript functions:

1. A function to set a cookie value
2. A function to get a cookie value
3. A function to check a cookie value

A Function to Set a Cookie

First, we create a function that stores the name of the visitor in a cookie variable:

Example

function setCookie(cname, cvalue, exdays) <
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = «expires=»+ d.toUTCString();
document.cookie = cname + «=» + cvalue + «;» + expires + «;path=/»;
>

Example explained:

The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).

The function sets a cookie by adding together the cookiename, the cookie value, and the expires string.

A Function to Get a Cookie

Then, we create a function that returns the value of a specified cookie:

Example

function getCookie(cname) <
let name = cname + «=»;
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(‘;’);
for(let i = 0; i let 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 explained:

Take the cookiename as parameter (cname).

Create a variable (name) with the text to search for (cname + «=»).

Decode the cookie string, to handle cookies with special characters, e.g. ‘$’

Split document.cookie on semicolons into an array called ca (ca = decodedCookie.split(‘;’)).

If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length, c.length).

If the cookie is not found, return «».

A Function to Check a Cookie

Last, we create the function that checks if a cookie is set.

If the cookie is set it will display a greeting.

If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:

Example

function checkCookie() <
let 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 Together Now

Example

function setCookie(cname, cvalue, exdays) <
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = «expires=»+d.toUTCString();
document.cookie = cname + «=» + cvalue + «;» + expires + «;path=/»;
>

function getCookie(cname) let name = cname + «=»;
let ca = document.cookie.split(‘;’);
for(let i = 0; i < ca.length; i++) let 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() let 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 example above runs the checkCookie() function when the page loads.

Источник