A Cookie is a piece of information that is stored locally on users browser and is sent with each HTTP request to the server. HTTP being a stateless protocol, cookies provide a mechanism by which we can remember user preferences and share information between web pages.

The cookies have a limit of 4KB thus when this limit is reached, you will likely be unable to create a new cookie. To make it more clear, size of all cookies under a specific domain cannot exceed 4KB.

A cookie is simply a key value pair. Pairs are separated by semicolons, while the equal sign character separates the key from its value. In addition to the values, a cookie may also set the following optionally:

• Expires − We can set an expiry date for a cookie post which it will deleted. If it is it not provided, it will last until session expires or browser is closed. It is to be noted that the format of date has to be in UTC/GMT.
• Domain − Specify the domain name of your site.
  If the cookie’s domain is not set when the browser receives the cookie, that cookie is associated with the server that sent the cookie. If the cookie’s domain has been set but does not match the name or the domain suffix of the server, then the browser does not send the cookie.
• Path − The path to the directory or web page that set the cookie. If path is specified then the cookie will be visible to only that path in a given domain.
  If left blank, the path value is ‘/’, meaning that the cookie is visible to all paths in a given domain.
• Secure − If the word “secure” is specified when creating the cookie, the cookie will only be sent to the server for https requests otherwise , no such restriction exists.

The order of setting the above parameters does matters and the following should be followed:
key=value;expiration_date;path;domain;Secure

We can create, update, read and delete cookies using document.cookie property as shown below.

Creating Cookie

 
We can create a cookie named “cookie_name” with value “cookie_value” as shown below:

document.cookie = "cookie_name=cookie_value";

We can specify the cookie expiry date in GMT/UTC format. If not specified, the cookie will be deleted when the browser is closed.

document.cookie = "cookie_name=cookie_value;expires=Fri, 10 Aug 2018 10:00:00 UTC"

We can also set the domain and path to specify to which domain and to which directories in the specific domain the cookie belongs to. By default, a cookie belongs to the current path of the current document location.

In the below example we have specified the default path value; so, the cookie will be visible to the entire domain which set the cookie.

document.cookie = "cookie_name=cookie_value; expires= Fri, 10 Aug 2018 10:00:00 UTC; path=/ "

Updating Cookie

Updating a cookie is just like recreating it. We specify the new values and they override the old values.

Below we are updating the cookie named “cookie_name” value from “cookie_value” to “cookie_value2” 

document.cookie = "cookie_name=cookie_value2; expires= Fri, 10 Aug 2018 10:00:00 UTC"

Reading Cookie

We can read all the cookies using “document.cookie” like this:

var allCookies = document.cookie;

In the above code, allCookies is a string containing a semicolon-separated list of all cookies (i.e. key=value pairs). Note that each key and value may be surrounded by whitespace (space and tab characters).

Now let us create some cookies and read their values:

document.cookie = "cookie_name1=cookie_value1";
document.cookie = "cookie_name2=cookie_value2; path=/ "

var allCookies = document.cookie;

Here allCookies is a string cookie_name1=cookie_value1;cookie_name2=cookie_value2;

Deleting Cookie

 
To delete a cookie we just need to set the cookie expiry date as a past date.

document.cookie = "cookie_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

It is recommended that you define the cookie path as some browsers will not let you delete a cookie if you don’t specify the path.

Here are some simple functions to help you work with cookies in JavaScript:

function setCookie(cookieName,cookieValue,expireInDays)
{
    var d = new Date();
    d.setTime(d.getTime() + (expireInDays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
}

function getCookie(cookieName)
{
    var name = cookieName + "=";
    var allCookiesArr = document.cookie.split(';');
    for(var i=0; i<allCookiesArr.length; i++)
    {
        var ck = allCookiesArr[i].trim();
        if (ck.indexOf(name)==0) {
            return ck.substring(name.length,ck.length);
        }
}
    return "";
}

function hasCookie(cookieName) {
    var c = getCookie(cookieName);
    if (c != "") {
        return true;
    } else {
        return false;
    }
}

You will like to check and use simple cookie framework that provides full unicode support.