Cookies in JavaScript

A cookie is a small text file stored on the user’s computer. It can be refer to every time the user comes back to the site that has set it (if the cookie has not expired or has not been deleted). In order for a cookie to be set, the viewer mast accept cookies. Cookies must be 4 KB or less in size (that means 4000 characters). A browser can accept up to 20 cookies from a single domain. Cookies were invented by Netscape.

Table of content:

  • Setting a Cookie
  • The escape() Method
  • Allowing User Input
  • Setting an Expiration Date
  • Reading a Cookie

Setting a cookie

In order to set a basic cookie you just have to give a value to the cookie property of the document object. There is a restriction, you can’t have spaces, commas, or semicolons inside the string.

The following cookie stores a name so that it can be identified if there will be more cookies later.

function setCookie() {
document.cookie = "name=moto1";
)

When the function is called, a cookie is set with the value of name=moto1. The equal sign (=) is a delimiter. You can use other delimiters, like the colon sign (:).

You may want to add some more text to your cookie. That would be easy as long as you don’t have to use space, commas, or semicolons.

function setCookie() {
document.cookie = "name=moto1&fav=Honda";
)

The value of the cookie is formatted in name=value pairs and each pair is separated with an ampersand (&). Another separator can be used.

The escape() method

If you want to use spaces, commas, or semicolons in your cookies then you have to escape them using escape() method.

function setCookie() {
var cookieText = "name=moto1|fav=Honda PCX";
var newcookieText = escape(cookieText);
document.cookie = newcookieText;
)

The cookieText variable is set to include the string you want t use in the cookie. The newcookieText variable is set to hold the result of the escaped cookieText variable. The escape text is used as the string of the cookie. It is escaped which means that instead of the space you will see %20 or something similar. So, when you want to use it, you have to unescape it.

Allowing user input

You can prompt the viewer for the information, escape it, and use it in the cookie.

function set_it() {
	var thefav = window.prompt("Enter your favorite type of cookie","");
	var thetext = "name=tasty1&fav="+thefav;
	var newtext = escape(thetext);
	document.cookie=newtext;
}

When the function is called, a prompt asks the user to “Enter your favorite type of cookie”. What ever the user enters in the prompt box will be sent to the cookie and you can use the information again when the user returns to the site.

Setting an expiration date

If you don’t set an expiration date, the cookie will be deleted once the browser is closed.

function set_it() {
	var thetext = "quote=I have a quote";
	var expdate = ";expires=Mon, 30 Mar 2017 13:00:00 UTC";
	var newtext = escape(thetext);
	newtext += expdate;
	document.cookie = newtext;
}

A new name/value pair that adds an expiration date is added to the code. Notice the name/value pairs are separated with a semicolon.

Reading a cookie

Reading a single cookie is simple. To read it you just need to get the value of the document.cookie property from the browser.

function read_it() {
	var mycookie = document.cookie;
}

In order to get a readable text you have to use unescape() method.

function read_it() {
	var mycookie = document.cookie;
	var fixed_mycookie = unescape(mycookie);
}

Leave a Reply