JavaScript Cookies

Cookies allow you to store information in the user's web browser.

What is a Cookie?

Cookies are small text files that allow you to store a small amount of data on the user's computer (near4KB).

After the web server sends the webpage to the browser, the connection will be closed, and the server will forget all information about the user.

Cookies were invented to solve the problem of 'how to remember information about the user'.

Cookies can be used to track information, such as user preferences, so that the website can retrieve this information to personalize the page when the user visits the site next time.

Cookies are saved in the form of 'name=value' pairs, for example:

username = Seagull

When the browser requests a webpage from the server, the cookies belonging to the page are added to the request. This way, the server will obtain the necessary data to 'remember' information about the user.

Use JavaScript to create a Cookie

In JavaScript, you can usedocument.cookieProperties to create, read, and delete cookies.

A cookie can be created like this:

　　document.cookie = "username=Seagull";

You can also add an expiration date (in UTC time). By default, cookies are deleted when the browser is closed:

　　document.cookie = "username=Seagull; expires=Mon,　25　Mar　2019　12:00:00 UTC";

Using the path parameter, you can tell the browser which path the cookie belongs to. By default, the cookie belongs to the current page:

　　document.cookie = "username=Seagull; expires=Mon,　25　Mar　2019　12:00:00 UTC; path=/";

Use JavaScript to read a Cookie

In JavaScript, you can read cookies like this:

　　var x = document.cookie;

Reading a cookie is slightly more complex because thedocument.cookieProperties return a single space-separated list of strings containing semicolons and all cookies (for example, name=value pairs, such as cookie1 = value; cookie2 = value; cookie3 = value). To get a single cookie from this list, you need to usesplit()Method to split it into individual name = value pairs and search for a specific name.

This string does not contain properties such as expires, path, domain, etc., which may already be part of the Cookie set.

Use JavaScript to change a Cookie

The only way to change or modify a cookie is to create another cookie with the same name and path as the existing one.

　　document.cookie = "username=Ankit; expires=Mon,　25　Mar　2019　12:00:00 UTC; path=/";

Note:Creating a cookie with the same name but a different cookie path will not change the existing cookie, but will add an additional cookie.

Use JavaScript to delete a Cookie

Deleting a Cookie is very easy. To delete a Cookie:

• Simply use the same setting for name and specify an empty value

• or set the expires parameter to a past date

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

Remember that if you have specified path as cookie or other attributes, you also need to include them when deleting it.

JavaScript Cookie Example

In the following example, we will create a cookie to store the username.

When the user visits this web page for the first time, they will be asked to/She fills in her name. Then the name is stored in the cookie.

When the user visits the same page next time, he/She will get the value stored in the cookie.

For the example, we will create2a JavaScript function:

• Function to set the cookie value

• Function to get the cookie value

Store cookie

First, we create a function to store the visitor's name in the cookie variable.

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth()　+　1);
　　var expires = "expires="+　now.toUTCString();
　　document.cookie = cname　+　"=="　+　cvalue　+　";　+　expires　+　";path=/";
}

Function description:

The parameters of the above function are the name of the cookie (cname) and the value of the cookie (cvalue).

This function sets the cookie by combining the cookie name, cookie value, and expires string (1month) together to set the cookie.

Read cookie

Then, we create a function to display the specified cookie value.

function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　document.write("Key is: "　+　cookiePair[0]　+　"and Value is: "　+　cookiePair[1]);
　　　　　}
　　}
}

Function description:

This function takes the cookie name (cname) as a parameter.

Get all cookies (allcookies = document.cookie).

Split the document.cookie on the semicolon into an array named cookieArr (cookieArr = allcookies.split(';'

Traverse the cookieArr array (i = 0; i <cookieArr.length; i ++]), and read out each value (cookiePair = cookieArr [i]).

If the cookie is found (cname == cookiePair [0]), then write the key and value of the cookie (cookiePair [0], cookiePair [1])。

Combined together

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth()　+　1);
　　var expires = "expires="+　now.toUTCString();
　　document.cookie = cname　+　"=="　+　cvalue　+　";　+　expires　+　";path=/";
}
function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　　　　document.write("Key is: "　+　cookiePair[0]　+　"and Value is: "　+　cookiePair[1]);
　　　　　}
　　}
}

Cookies properties

Cookies are objects with5A plain text data record of a property: