What are Cookies?
Normally, Cookies store user information in small text files.on your computer.
A cookie is a piece of data that is stored on your browser to be accessed by your browser. Cookies are also saved as key/value pairs.
Cookies will remember information about the user, when server forgets everything about the user after the connection is shut down.
- When a user visits a web page, The name of user can be stored in a cookie.
- Next time the user visits the page, the cookie “remembers” the name.
How It Works ?
Server sends some data to the visitor’s browser in the form of a cookie. The browser may accept the cookie. When the visitor go to another page, the browser sends the same cookie to the server.
Cookies are a plain text data record of 5 variable −
- Expires − The date the cookie will expire
- Domain − The domain name of thewebsite.
- Path − The path to the directory or web page that set the cookie.
- Secure − The cookie may only be retrieved with a secure server.
- Name value – Cookies are set and retrieved in the form of key-value pairs
Create a Cookie with JavaScript
JS can create, read, and delete cookies with the document.cookie property.
A cookie can be created like this:
document.cookie = “username=Ram Das”;
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <head> <script type="text/javascript"> functionWriteCookie() { if (document.myform.customer.value == "") { alert("Enter value!"); return; } cookievalue = escape(document.myform.customer.value) + ";"; document.cookie = "name=" + cookievalue; document.write("Setting Cookies : " + "name=" + cookievalue); } </script> </head> <body> <form name="myform" action=""> <p>Enter name: <input type="text" name="ename" /> </p> <br> <p> <input type="button" value="Set Cookie" onclick="WriteCookie();" /> </p> <br> </form> </body> </html> |
Read a Cookie with JavaScript
With JS, cookies can be read like this:
var x = document.cookie;
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <script type="text/javascript"> functionReadCookie() { varallcookies = document.cookie; document.write("All Cookies : " + allcookies); cookiearray = allcookies.split(';'); for (var i = 0; i < cookiearray.length; i++) { name = cookiearray[i].split('=')[0]; value = cookiearray[i].split('=')[1]; document.write("Key is : " + name + " and Value is : " + value); } } </script> </head> <body> <form name="myform" action=""> <input type="button" value="Get Cookie" onclick="ReadCookie()" /> </form> </body> </html> |
Change a Cookie with JavaScript
With JS, cookies can be changed like this:
document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;
Example
In this example the cookie extend the expiry date by 1 Month.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <script type="text/javascript"> functionWriteCookie() { var now = new Date(); now.setMonth(now.getMonth() + 1); cookievalue = escape(document.myform.customer.value) + ";" document.cookie = "name=" + cookievalue; document.cookie = "expires=" + now.toUTCString() + ";" document.write("Setting Cookies : " + "name=" + cookievalue); } </script> </head> <body> <form name="myform" action=""> <p>Enter name: <input type="text" name="name" /> </p> <br> <input type="button" value="Set Cookie" onclick="WriteCookie()" /> </form> </body> </html> |
Delete a Cookie with JavaScript
With JS, cookies can be delete like this:
Just set the expires parameter to a passed date:
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <head> <script type="text/javascript"> functionWriteCookie() { var now = new Date(); now.setMonth(now.getMonth() - 1); cookievalue = escape(document.myform.customer.value) + ";" document.cookie = "name=" + cookievalue; document.cookie = "expires=" + now.toUTCString() + ";" document.write("Setting Cookies : " + "name=" + cookievalue); } </script> </head> <body> <form name="myform" action=""> <p>Enter name: <input type="text" name="name" /> </p> <input type="button" value="Set Cookie" onclick="WriteCookie()" /> </form> </body> </html> |
Full Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <html> <head> <script> functionsetCookie(jsname, jsvalue, jsdays) { varjsd = new Date(); jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000)); varjsexpires = "jsexpires=" + jsd.toGMTString(); document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/"; } functiongetCookie(jsname) { var name = jsname + "="; vardecodedCookie = decodeURIComponent(document.cookie); varjca = decodedCookie.split(';'); for (var i = 0; i < jca.length; i++) { var c = jca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { returnc.substring(name.length, c.length); } } return ""; } functioncheckCookie() { varjsuser = getCookie("username"); if (jsuser != "") { alert("Welcome " + jsuser); } else { jsuser = prompt("Enter your name:", ""); if (jsuser != "" && jsuser != null) { setCookie("username", jsuser, 30); } } } </script> </head> <body onload="checkCookie()"></body> </html> |