Cookie

The Cookie component provides a simple and efficient way to manage browser cookies. It offers methods for setting, getting, and deleting cookies with various configuration options.

Dependencies

• Metro UI Core
• DOM Library

Usage

Basic Usage

// Set a cookie
Metro.cookie.setCookie("user-preference", "dark-mode");

// Get a cookie
const preference = Metro.cookie.getCookie("user-preference");
console.log(preference); // "dark-mode"

// Delete a cookie
Metro.cookie.delCookie("user-preference");

Get All Cookies

// Get all cookies as an object
const allCookies = Metro.cookie.getCookies();
console.log(allCookies);

Set Cookie with Options

// Set a cookie with expiration date (in milliseconds)
Metro.cookie.setCookie("session-token", "abc123", 3600000); // Expires in 1 hour

// Set a cookie with detailed options
Metro.cookie.setCookie("user-id", "12345", {
    path: "/dashboard",
    domain: "example.com",
    secure: true,
    maxAge: 86400, // 24 hours in seconds
    samesite: "Strict"
});

Configure Default Cookie Settings

// Configure default settings for all cookies
Metro.cookieSetup({
    path: "/app",
    secure: true,
    samesite: "Lax"
});

// After this, all cookies will use these defaults unless overridden

Plugin Parameters

Parameter	Type	Default	Description
path	String	”/“	The path where the cookie is valid
expires	String	null	Expiration date in UTC string format
maxAge	Number	null	Maximum age of the cookie in seconds
domain	String	null	Domain where the cookie is valid
secure	Boolean	false	If true, cookie is only sent over HTTPS
samesite	String	null	CSRF protection setting (“Strict”, “Lax”, or “None”)

API Methods

• cookieSetup(options) - Configures default settings for all cookies.

Example of Method Usage

Metro.cookieSetup({
    path: "/app",
    secure: true,
    samesite: "Lax"
});

• getCookies() - Returns all cookies as an object with cookie names as keys and their values as values.

Example of Method Usage

const allCookies = Metro.cookie.getCookies();
console.log(allCookies);

• getCookie(name) - Gets the value of a specific cookie.

Example of Method Usage

const preference = Metro.cookie.getCookie("user-preference");

• setCookie(name, value, options) - Sets a cookie with the specified name, value, and options.

Example of Method Usage

// With simple expiration time in milliseconds
Metro.cookie.setCookie("session-token", "abc123", 3600000);

// With detailed options
Metro.cookie.setCookie("user-id", "12345", {
    path: "/dashboard",
    secure: true,
    maxAge: 86400
});

• delCookie(name) - Deletes a cookie with the specified name.

Example of Method Usage

Metro.cookie.delCookie("user-preference");

Examples

User Authentication

// Store authentication token
function login(token) {
    // Set cookie to expire in 7 days
    const sevenDays = 7 * 24 * 60 * 60 * 1000;
    Metro.cookie.setCookie("auth-token", token, {
        maxAge: sevenDays / 1000, // Convert to seconds
        secure: true,
        samesite: "Strict"
    });
}

// Check if user is logged in
function isLoggedIn() {
    return Metro.cookie.getCookie("auth-token") !== null;
}

// Logout user
function logout() {
    Metro.cookie.delCookie("auth-token");
}

User Preferences

// Save user theme preference
function setTheme(theme) {
    // Store for 1 year
    const oneYear = 365 * 24 * 60 * 60 * 1000;
    Metro.cookie.setCookie("user-theme", theme, oneYear);
}

// Get user theme preference
function getTheme() {
    return Metro.cookie.getCookie("user-theme") || "light";
}

Best Practices

1. Always use the secure flag for cookies containing sensitive information
2. Consider using the samesite attribute to prevent CSRF attacks
3. Set appropriate expiration times for cookies to enhance security
4. Be mindful of cookie size limitations (typically 4KB per cookie)
5. For storing complex data, consider serializing to JSON before storing