[Solved]-Set,Delete and Read cookie value by name in JavaScript

[Solved]-Set,Delete and Read cookie value by name in JavaScript

A cookie is a Temporary Web Storage File, which stores the keywords searched by the user on the Internet or filled information up to the time period set by the server. It is known by many names, such as Web Cookie, Browser Cookie, and HTTP Cookie.

A cookie is mainly of 2 Type,

Session Cookie: Cookie that automatically deletes as soon as the browser is closed is called Session Cookie. Its use is mostly for government websites or if you build a highly secure website.

Permanent Cookie: cookie that presents in the browser even after closing Browser, the information you have searched or filled on the Internet, is stored for 1 Day, 1 Month, or 1 year. All such cookie is called Permanent Cookie. This type of cookie is used for Travel or Online Booking Website.

How do cookies work?

When any website is created, cookies are made by Web Developers. As soon as you open such a website. It lets you drop your cookies file on your Computer Browser.

After cookies are set on your browser, it works like Cache Memory and whatever you search on the Internet. Cookies keep storing that information and send it to their website server.

In this Part I will explain you Following Points:-

  • How to Deal with Cookies in JavaScript
  • Set cookie and get cookie with JavaScript
  • How to set cookie’s expire date with JavaScript?
  • Setting cookie to expire after x day

Html Code

<!DOCTYPE html>
<html>
<head>
    <title>DotNetPeTips</title>
    <meta charset="utf-8" />
</head>
<body>
    <fieldset>
        <legend>Create Cookie</legend>
        <button type="button" onclick="CreateCookie('testcookie',10,'testing cookie message')">Create Cookie</button>
        <button type="button" onclick="getCookie('testcookie')">Read Cookie</button>
        <button type="button" onclick="DeleteCookie('testcookie')">Delete Cookie</button>
    </fieldset>
    <script type="text/javascript">
        function SetCookie(cookie_name, days,value) {
            debugger;
            var today = new Date();
            var expiresdate = new Date(today.setTime(today.getTime() + days * 86400000));
            document.cookie = cookie_name + "=" + value + "; expires=" +
            expiresdate.toGMTString();
            alert("cookie set successfully!");
        }

        function getCookie(cookie_name) {
            if (document.cookie.length > 0) {
                cookie_start = document.cookie.indexOf(cookie_name);
                if (cookie_start) {
                    cookie_start = cookie_start + cookie_name.length + 1;
                    cookie_end = document.cookie.indexOf(";", cookie_start);
                    if (cookie_end == -1) {
                        cookie_end = document.cookie.length;
                    }
                    alert(unescape(document.cookie.substring(cookie_start, cookie_end)));
                    return unescape(document.cookie.substring(cookie_start, cookie_end));
                }
            }
            return "";
        }

        function DeleteCookie(cookie_name) {
            debugger
            SetCookie(cookie_name, '', -2)
        }
    </script>
</body>
</html>

 

Create Cookie:-

Below is a simple code for creating Cookies in the Browser, you can say that cookies are plain text data with a record of 5 i.e

 

  • Expires − The date when you the cookie will expire. If you set this value blank, then the cookie will expire when the user closes the browser. These cookies also are known as Session Cookie or temporary cookies.
  • Domain −Url of your Web Application.
  • Path − The path web page that sets the cookie. you can set value blank if you want to read the cookie from any page.
  • Secure − if you set this field “secure”, then the cookie only be retrieved with a secure server like only with https.
  • Name and Value − Cookies are store in the form of key-value pairs. using this property can define the name of the cookie which will help you when reading the cookie value.

 

 function SetCookie(cookie_name, days,value) {
            debugger;
            var today = new Date();
            var expiresdate = new Date(today.setTime(today.getTime() + days * 86400000));
            document.cookie = cookie_name + "=" + value + "; expires=" +
            expiresdate.toGMTString();
            alert("cookie set successfully!");
        }

 

Read Cookie:-

Reading a cookie value very simple,the value of the document.cookie object is the cookie.

 function getCookie(cookie_name) {
            if (document.cookie.length > 0) {
                cookie_start = document.cookie.indexOf(cookie_name);
                if (cookie_start) {
                    cookie_start = cookie_start + cookie_name.length + 1;
                    cookie_end = document.cookie.indexOf(";", cookie_start);
                    if (cookie_end == -1) {
                        cookie_end = document.cookie.length;
                    }
                    alert(unescape(document.cookie.substring(cookie_start, cookie_end)));
                    return unescape(document.cookie.substring(cookie_start, cookie_end));
                }
            }
            return "";
        }

Delete Cookie:-

If you want to delete a cookie then you just need to set the expiry date to a time in the past.

 function DeleteCookie(cookie_name) {
            debugger
            SetCookie(cookie_name, '', -2)
        }

Ashok Patel

I'm an electronic engineer working in a multinational company,having good experience on Electronics and electrical engineers design and oversee production of electronic equipment such as radios, televisions, computers, washing machines and telecommunication systems.I like to do RND and Research.I also have hands on experience graphic design software and in web designing having great command on ASP.NET, HTML5, JavaScript, T-SQL, JQuery.

Add comment

Donate for Corona Victim

Corona Virus Relief Fund

Your Header Sidebar area is currently empty. Hurry up and add some widgets.