Cookies
Cookies
are small pieces of data stored by a website in the user's browser.
Cookies are used for various purposes, such as saving user preferences or recording pages visited by the user.
Key Features of Cookies
-
Expiration
: Cookies can have an expiration date. Once this date is reached, the cookie is automatically deleted. -
Domain and Path Restriction
: Cookies can be restricted to be used only for specific domains and paths. -
Security
: Options like HttpOnly and Secure can prevent cookies from being stolen and exposing personal information. HttpOnly prevents JavaScript from accessing the cookie, while Secure ensures cookies are only sent over HTTPS (secure connections).
Setting a Cookie
document.cookie = 'username=John; expires=Fri, 31 Dec 2023 12:00:00 UTC; path=/'; // Set a cookie
This code
-
Sets a cookie named "username" with the value "John":
username=John
; -
The cookie is valid until December 31, 2023:
expires=Fri, 31 Dec 2023 12:00:00 UTC
; -
Accessible on all pages of the website:
path=/
.
Retrieving a Value from a Cookie
Cookies are stored in document.cookie
, which returns a string representing the cookies.
function getCookie(name) { const value = '; ' + document.cookie; // Cookie values are separated by semicolons const parts = value.split('; ' + name + '='); // Find the cookie value using the cookie name if (parts.length == 2) return parts.pop().split(';').shift(); // Return the cookie value } console.log(getCookie('username')); // John
Deleting a Cookie
Cookies cannot be directly deleted by JavaScript. Instead, you can set the expiration date of the cookie to a past date, effectively expiring it.
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; // Delete a cookie
By doing this, the "username" cookie is immediately deactivated.
The code on the right is an example of storing a cookie in the browser and checking the stored cookie.
Cookies can keep a record of the pages a user has visited.
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help