JavaScript Cookies
JavaScript cookies are small data stored on a user’s device by a web browser. These cookies play a crucial role in web development, enabling websites to store and retrieve information about user preferences, session states, and other data. Cookies facilitate a more personalized browsing experience by allowing websites to remember user actions and preferences. They are widely used for user authentication, tracking, and maintaining session states.
Table of Content
- Creating Cookie in JavaScript
- Reading Cookie in JavaScript
- Changing Cookie in JavaScript
- Deleting Cookie in JavaScript
Creating Cookie in JavaScript
Cookies are created by a web server and sent to the user’s browser as part of the HTTP response headers.
Creating cookies in JavaScript involves using the document.cookie object to set key-value pairs and additional parameters. To create a cookie, assign a string containing the desired cookie information to document.cookie. This string can include attributes like expiration date, domain, and path.
Example: To demonstrate creating a cookie in JavaScript using a document.cookie method.
Javascript
document.cookie = "courseName=webDeveopment bootcamp; expires = Thu, 5 March 2030 12:00:00 UTC; path = /"; |
Output:
courseName= "webDeveopment bootcamp; expires = Thu, 5 March 2030 12:00:00 UTC; path = /"
Reading Cookie in JavaScript
JavaScript allows developers to read cookies using the document.cookie property, which stores all cookies as a string. To extract specific values, developers often create functions that parse this string. Security considerations, like proper decoding and HttpOnly attributes, are crucial.
Example: To demonstrate reading an already created cookie in JavaScript.
Javascript
function getCookie(cookieName) { const cookies = document.cookie.split('; '); for (const cookie of cookies) { const [name, value] = cookie.split('='); if (name === cookieName) { return decodeURIComponent(value); } } return null;}const courseName = getCookie('courseName');console.log('Course Name:', courseName); |
Output:
Course Name: webDeveopment bootcamp
Changing Cookie in JavaScript
JavaScript enables the modification of cookies by updating their values or attributes. Developers use the document.cookie property to both read and write cookies. When changing a cookie, it’s crucial to consider parameters like expiration date, path, and security attributes.
Example: To demonstrate changing an already existing cookie in JavaScript.
Javascript
document.cookie = "courseName=WebDevelopmentBootcamp; expires=Thu, 5 March 2030 12:00:00 UTC; path=/";function changeCookieValue(cookieName, newValue) { document.cookie = `${cookieName}=${newValue}; expires=Thu, 5 March 2030 12:00:00 UTC; path=/`;}changeCookieValue('courseName', 'AdvancedJavaScriptCourse'); |
Output:
Course Name: WebDevelopmentBootcamp
Course Name after Change: AdvancedJavaScriptCourse
Deleting Cookie in JavaScript
JavaScript provides a way to delete cookies by setting their expiration date in the past. When a cookie’s expiration date is in the past, the browser automatically removes it. Developers use the document.cookie property to delete cookies, ensuring a clean and secure user experience.
Example: To demonstrate deleting a cookie in JavaScript using
Javascript
document.cookie = "courseName=WebDevelopmentBootcamp; expires=Thu, 5 March 2030 12:00:00 UTC; path=/";function deleteCookie(cookieName) { document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;}deleteCookie('courseName'); |
Output:
Course Name: WebDevelopmentBootcamp
Cookie 'courseName' deleted.