A cookie is an important tool as it allows you to store the user information as a name-value pair separated by a semi-colon in a string format. If we save a cookie in our browser then we can log in directly to the browser because it saves the user information.
Approach: When a user sends the request to the server then the cookie tells that this user is already logged in your browser and the server recognizes the user and allows the user to log in. We can apply various operations on cookie-like create, delete, read, add an expiry date to it so that users can never be logged in after a specific time. A cookie is created by the document.cookie keyword as shown below.
Example: In the below example, we will take input from the user as a name for the cookie and store it in cookievalue. Then cookievalue is stored in string format adding the ‘name’ attribute and then the cookie is created in the browser.
HTML
<!DOCTYPE html> <html> Â Â <body> Â Â Â Â <form name="myform" action=""> Â Â Â Â Â Â Â Â Enter name: Â Â Â Â Â Â Â Â <input type="text" name="customer" /> Â Â Â Â Â Â Â Â <input type="button" value="Set Cookie"Â Â Â Â Â Â Â Â Â Â Â Â Â onclick="WriteCookie();" /> Â Â Â Â </form> Â Â Â Â Â Â <script type="text/javascript"> Â Â Â Â Â Â Â Â function WriteCookie() { Â Â Â Â Â Â Â Â Â Â Â Â if (document.myform.customer.value == "") { Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â alert("Please enter value"); Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â return; Â Â Â Â Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â Â Â Â Â cookievalue = escape( Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â document.myform.customer.value) + ";"; Â Â Â Â Â Â Â Â Â Â Â Â Â Â document.cookie = "name=" + cookievalue; Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â document.write("Setting Cookies : "Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â + "name=" + cookievalue); Â Â Â Â Â Â Â Â } Â Â Â Â </script> </body> Â Â </html |
Output:
Adding an expiry date (in UTC): We can add expire date for the cookie to ensure that after that time the cookie will no longer be in use.
Syntax:
document.cookie = "username=neveropen; expires=Sun, 16 JAN 2022 12:00:00 UTC";
Deleting the Cookie: When you want to delete the cookie just simply set the expires parameter and leave the username blank.
document.cookie = "username=; expires=Sun, 16 JAN 2022 12:00:00 UTC";
