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.
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
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.
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.
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.
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:
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 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.
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:
Next TopicES6 Dialog Boxes