Managing Cookies with JavaScript and jQuery Plugins

Introduction

Cookies are small pieces of data stored by a web browser on behalf of a website. They help maintain stateful information (like login status) or track user preferences across sessions. In this tutorial, we will explore how to set, read, and delete cookies using plain JavaScript and jQuery plugins.

Setting Cookies with Plain JavaScript

To create a cookie in pure JavaScript, you need to construct a document.cookie string that includes the name, value, expiration date (optional), path (optional), domain (optional), and secure flag (optional). Here’s a basic implementation:

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

Usage Example:

setCookie('username', 'JohnDoe', 7); // Stores 'username=JohnDoe' for 7 days

Reading Cookies with Plain JavaScript

Reading a cookie involves parsing the document.cookie string to find the desired key-value pair. Here’s how you can achieve that:

function getCookie(name) {
    const nameEQ = encodeURIComponent(name) + "=";
    const ca = document.cookie.split('; ');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

Usage Example:

console.log(getCookie('username')); // Retrieves the cookie value for 'username'

Deleting Cookies with Plain JavaScript

To delete a cookie, you set its expiration date to a past date. Here’s how:

function eraseCookie(name) {
    document.cookie = encodeURIComponent(name) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

Usage Example:

eraseCookie('username'); // Deletes the cookie 'username'
console.log(getCookie('username')); // Returns null since cookie is deleted

Managing Cookies with jQuery Plugins

While plain JavaScript can handle most cookie operations, you might find using a plugin more convenient for complex tasks or if you prefer concise code. One popular library is js-cookie, which simplifies the process.

First, include the js-cookie library in your project:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>

Setting Cookies with js-cookie

Cookies.set('name', 'value'); // Set a cookie named 'name' with value 'value'
Cookies.set('test', 1, { expires: 10 }); // Sets 'test' cookie to expire in 10 days

Reading Cookies with js-cookie

const value = Cookies.get('name'); // Retrieves the value of the cookie named 'name'
console.log(value); // Outputs the cookie value or null if not found

Deleting Cookies with js-cookie

Cookies.remove('test'); // Removes the cookie named 'test'

Best Practices and Tips

• Security: Use the secure flag for cookies to ensure they are sent over HTTPS. Also, consider setting the HttpOnly flag to prevent access from JavaScript, thus mitigating XSS attacks.

• Expiration: Always set an expiration date for session-based cookies to avoid them lingering indefinitely in a user’s browser.

• Path and Domain: Be mindful of the path and domain when setting cookies, especially if your site uses multiple subdomains or paths that need shared access to the cookie data.

By understanding how to manage cookies with both plain JavaScript and jQuery plugins like js-cookie, you can effectively handle client-side storage in a secure and efficient manner. This knowledge is crucial for building modern web applications that provide seamless user experiences.