JS cookie Attributes

Prev Next

Cookies are small pieces of data stored by a web browser that provide a way for websites to remember user information and preferences between sessions. When working with cookies in JavaScript, several attributes can be used to control their behavior and scope. These attributes enhance the functionality of cookies by specifying their expiration, accessibility, and security.

JavaScript cookies can be enhanced with several optional attributes that provide more control over how cookies are stored and managed.

Here’s a list of common attributes and their descriptions:

Attribute Description
expires Sets the expiration date and time of the cookie. The cookie will be deleted automatically when this date and time is reached. If not specified, the cookie is a session cookie and will be deleted when the browser is closed.
max-age Specifies the maximum age of the cookie in seconds. The cookie will be deleted automatically when this period has elapsed. If both expires and max-age are set, max-age takes precedence.
path Defines the URL path where the cookie is accessible. If not specified, the default is the path of the page where the cookie was created.
domain Specifies the domain for which the cookie is valid. This allows the cookie to be shared across subdomains. If not specified, the default is the domain of the page that set the cookie.
secure Indicates that the cookie should only be sent over HTTPS connections. This helps to ensure that the cookie is not exposed over insecure HTTP connections.
SameSite Controls whether a cookie is sent with cross-site requests. It can have three values: Strict, Lax, and None. Strict prevents the cookie from being sent with any cross-site requests. Lax allows the cookie to be sent with some cross-site requests. None allows the cookie to be sent with all cross-site requests but requires Secure to be set.

Example:

<script>
    // Set a cookie with expiration date
    document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

    // Set a cookie with max-age
    document.cookie = "sessionToken=abcd1234; max-age=3600; path=/";

    // Set a cookie with domain
    document.cookie = "userID=5678; expires=Fri, 31 Dec 2024 23:59:59 GMT; domain=example.com; path=/";

    // Set a cookie with secure attribute
    document.cookie = "secureData=secureValue; expires=Fri, 31 Dec 2024 23:59:59 GMT; secure; path=/";

    // Set a cookie with SameSite attribute
    document.cookie = "samesiteCookie=someValue; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; SameSite=Lax";

    // Function to read cookies
    function getCookie(name) {
        const cookies = document.cookie.split('; ');
        const cookie = cookies.find(row => row.startsWith(name + '='));
        return cookie ? cookie.split('=')[1] : null;
    }

    // Display the cookies
    document.write("Username cookie:", getCookie("username"),"<br>");
    document.write("SessionToken cookie:", getCookie("sessionToken"),"<br>");
    document.write("UserID cookie:", getCookie("userID"),"<br>");
    document.write("SecureData cookie:", getCookie("secureData"),"<br>");
    document.write("SameSiteCookie:", getCookie("samesiteCookie"));
</script>

Prev Next