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.

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.