ES6 Cookies

The cookie can be defined as a small piece of text that a browser stores in the user's computer. Cookies are an old mechanism of client-side storage that was designed to be used in server-side scripting languages like ASP, php, etc.

Mainly, cookies are used for keeping track of information like user preferences that can retrieve for personalizing the page when the user revisits the website. Cookies can also be created, modified, and accessed directly by JavaScript, but the process for doing the same is somehow complicated.

Why Cookies required?

Servers and web browsers use HTTP protocol (stateless protocol) for communication. HTTP is a stateless protocol, so after processing the initial client request by the web server, it does not remember anything about the settings made by the client. It treats every request independently. So, the server does not keep track of data after sending it on the browser. But in many cases, data will be required again.

This request-response cycle between client and server is referred to as a session. Cookies are the default mechanism that is used by the browsers for storing the data refer to the user's session.

Note: Do not save your sensitive data like your passwords and credit card information in cookies as the malicious user could use it.

How do Cookies work?

The server sends some data to the user's browser in the form of a cookie. The browser may accept the cookie. If it accepts, then it is stored as a record of plain text on the hard drive of the user. Now, when a user visits another page of the same website, then the browser sends the same cookie to the server for retrieval. Once it is retrieved, then the corresponding server remembers what was stored earlier.

Cookies are a plain-text record of data that includes five variable-length fields

• Name and value: The setting and retrieval of cookies are in the form of a key-value
• Domain: It is the domain name of the website.
• Path: It includes the webpage or directory that sets the cookie. It may be blank if you require to retrieve the cookie from any page or directory. It's default value is the path of the current page.
• Secure: As its name implies, the cookie may be retrieved with a secure server. If this field is blank, then no such restrictions required.
• Expires: It is the date when the cookie will expire. If this field is blank, then the cookie will expire when the user exits the browser.

Originally, cookies were designed for CGI (Common Gateway Interface) programming. The data in the cookie is transmitted automatically between the web server and web browser. So, CGI scripts on the server can read and write the values of cookies that are stored on the client-side.

In JavaScript, we can manipulate the cookies by using the cookie property of the document object. We can also create, read, delete, and modify the cookies that apply to the current page.

Storing Cookies

The easiest way of creating or storing a new cookie is to assign a name = value string value to the document.cookie object. It will look like this:

The expire attribute in the above syntax is optional. If we manually provide the valid date and time to this attribute, then the cookie will expire on the given date and time.

The value of the cookie cannot contain whitespaces, commas, or semicolons. Because of this, we will require to use escape() function (the built-in function of JavaScript) for encoding the values containing these characters before storing it in the cookie. Likewise, we will also need to use corresponding unescape() function for reading the cookie value.

By default, the lifetime of the above cookie is the current browser session. It means that it will be lost when user exits the browser.

Cookies expire attribute

You can specify the cookie's lifetime by using the expires attribute. This attribute gives a way to create a persistent cookie. Here, the declaration of time and date represents the active period of a cookie. Once, the declared time is passed, the cookie will delete automatically.

For example:

Cookies max-age attribute

To make a cookie that persists beyond the session of the current browser, we need to specify its lifetime (in seconds). We can also specify it by using the max-age attribute. It is an alternative to expires attribute, which specifies the expiration of cookie in seconds from the current moment. This attribute determines the lifetime of a cookie that how long it could remain on the user's system before deletion.

If the value of the max-age attribute is either zero or negative, then the cookie is deleted.

For example: The lifetime of the following cookie is for 30 days.

Example of storing cookies

Let us try to understand the illustration for setting up the cookie by using the following example:

Output

After the successful execution of the above code, you will get the following output.

If the textfield is empty and you are clicking on the setCookie button, then you will get an alert, as shown in the following image.

Once you entered the required value and click on the setCookie button, then you will see the following output.

Reading Cookies

Reading a cookie is slightly complex than setting the cookie because document.cookie property returns you a string that contains a space and semicolon separated list of all cookies. You can use this string where you require to access the cookie.

To get a cookie from the list, you can use the split() function of strings for breaking the string in the form of keys and values.

Example

Updating Cookies

In JavaScript, you can change the cookie in the same way as you create it by overwriting it with a new value. The only way to update or modify the cookie is to create another cookie. If you create a cookie with the same name but with different path then that of an existing one, it will cause the addition of a new cookie.

Example

Deleting a Cookie

There are some situations in which you want to delete a cookie. The process to delete a cookie is quite simple. You do not require to specify the value of a cookie to delete it. To do this, you need to set the value of the 'expires' attribute to a passed date.

You can see the illustration for the same in the following code: