Search within TutorialsPark

Javascript Cookies: Creation

Learn how to create, apply , and delete a cookie .

Javascript Cookies: Cookie Object

Using JavaScript a cookie is stored as a document object for the purpose of both reading and writing, all attributes are assigned to the cookie property.

The document.cookie property stores information in form of name=value pairs

All other attributes of cookies such as name, expiration date, path, secure flag etc are not visible.

Javascript Cookies: Assigning Attributes to a Cookie.

A cookie is assigned name=value attributes using the document.cookie property.

While assigning name=value attributes to a cookie, using any whitespace, commas or semicolons is not allowed.

Syntax: JavaScript Cookies - Assigning Attributes.

Javascript Cookies: Functions escape() and unescape()

Since certain characters like commas, semicolons, whitespaces etc cannot be used directly, hence functions like escape() and unescape() are built-in and used for encoding and decoding purposes.

escape() function is used to encode the characters that are not text or numbers into the hexadecimal equivalent of their character in Latin-1 character set, preceding with a character %.

unescape() function is used while retrieving the cookie, it converts the encoded data to plain text.

Example : Javascript Function escape() and unescape() .

Give it a TRY! » Note: Press the buttons to encode and decode the text provided by you.

JavaScript Cookies: Creating a Cookie.

Finally, we are baking our first cookie. In the below demo we create two cookies called as Client and Background Color.

We will assign these cookies with the Client's name and background color in form of name=value pair using the property document.cookie

After the first visit to this webpage the cookie file is saved within the user's browser, on all further visits the user will be uniquiely identified using this cookie file and new information will be get updated to the cookie file.

Example: JavaScript Cookies: Creating a Cookie.

Give it a TRY! » Note: The index position is set at "5" to parse the value attribute of the cookies, which begins after "name="

JavaScript Cookies: Retrieving Cookies .

User can also retrieve a cookie, but you will get only what you have written on the server you were on.

Cookies residing on some other server or belonging to some other user cannot be retrieved, read or written.

JavaScript Cookies: Retrieving Cookies from the Server.

Give it a TRY! » Note:Function split is used to split the cookie string by semicolons and return an array called as demoCookie

JavaScript Cookies: Deleting Cookies.

As soon as the user session ends, the cookie is deleted.But you set custom expiration date for cookies as well.

Hence to delete a cookie for the current page, you need to assign an expiration date earlier than the current date.

Example: JavaScript Cookies Deleting the Cookie.

Give it a TRY! » Note:When the radio button is clicked, the function deleteCookie() is called.

JavaScript Cookies: Removing the Cookies using the Browser.

Users can remove the cookie completely using the Browser's Privacy options. Visit the links below to see in detail on how to delete cookies for various browsers

Deleting Cookies from Mozilla Firefox

Deleting Cookies from Internet Explorer

Deleting Cookies from Google Chrome

Deleting Cookies from Safari

Deleting Cookies from Opera