COOKIES IN JAVASCRIPT

COOKIES:

  • Cookies let you store user information in web pages.
  • Cookies are data, stored in small text files, on computer.
  • When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
  • Cookies were invented to solve the problem "how to remember information about the user":
ü  When a user visits a web page, his name can be stored in a cookie.
ü  Next time the user visits the page, the cookie "remembers" his name.
  • Cookies are saved in name-value pairs
When a browser request a web page from a server, cookies belonging to the page is added to the request. This way the server gets the necessary data to "remember" information about users.

TO CREATE A COOKIE:

JavaScript can create, read, and delete cookies with the document.cookie property.
With JavaScript, a cookie can be created like this:
Document.cookie=”username=vinoth kumar”;
By default, the cookie is deleted when the browser is closed
We can also add an expiry date to cookie:
document.cookie="username=Vinoth kumar; expires=Thu, 18 Dec 2014 12:00:00”;
With a path parameter,we can tell the browser what path the cookie belongs to.
By default, the cookie belongs to the current page.
document.cookie="username=Vinoth kumar; expires=Thu, 18 Dec 2014 12:00:00 ; path=/";

TO READ A COOKIE:

var x = document.cookie;
TO CHANGE A COOKIE:
We can change a cookie the same way as we create it:
document.cookie="username=SAN SUI; expires=Thu, 18 Dec 2014 12:00:00 ; path=/";

TO DELETE A COOKIE:

Deleting a cookie is very simple. Just set the expires parameter to a passed date:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 ";
Note: we don't need to specify a cookie value when you delete a cookie.

 Example:

In the example , we will create a cookie that stores the name of a visitor.
The first time a visitor arrives to the web page, he will be asked to fill in his name. The name is then stored in a cookie.
The next time the visitor arrives at the same page, he 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
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
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, 30);
       }
    }
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>

Reference: http://www.w3schools.com



No comments:

Post a Comment