set-cookie

Syntax

set-cookie: name(cookie name) value(value) [expires(see below)] [path(path)] [domain(domain)] [samesite(see below)] [Secure] [HttpOnly] [every (time)] [after (time)][, etc...];

This command sets a cookie. This command and remove-cookie have been updated for the introduction of the "samesite" requirements in version 2.4.0.

Double-quotes are optional on all parameters and will be ignored. All the parameters except name and value are case-insensitive.

expires: This is how long the cookie is going to last for. Possible values are "Infinity", "Year", "Month", "Hour", "Second", a date string in Coordinated Universal Time (UTC) format, or friendlier things like "3 months", "-1 hour", "2 years", "1 year", "+60 seconds", "45 minutes". If you need a more custom solution for a date parameter don't forget you can use the "{= JavaScript date expression =}", which you can use in all action commands, eg. 'expires("{= new Date().toUTCString() =}")'.

samesite: Possible values are "Strict", "Lax" or "None".

This command follows native rules with the remaining syntax parameters.

To see the native rules: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

Important note: It is vital that set exactly the same path in set-cookie and remove-cookie. If you don't specify a path in set-cookie, it will set the path to the path you are in when the cookie is set and make it confusing when you try and delete it. DevTools inspect cookie may not show that the cookie has been deleted, when in fact it has.

So ensure you set the path in set-cookie and remove-cookie to be exactly the same, and you should be ok.

When this site had cookies it used "/" as the path. This worked in all areas of the site. See the code below.

The example below is from the cookie handling that used to be on this site.

.cookieNotice was the popup container div.
.cookieNoticeOk was the ok button in the popup.

set-cookie

body:not-if-cookie-exists(cookieNoticeSeen):init {
    .cookieNotice {
        display: block;
        opacity: 1 after 100ms;
    }
}

.cookieNoticeOk:click {
    .cookieNotice {
        opacity: 0;
        display: none after 500ms;
        set-cookie: name(cookieNoticeSeen) value("y") expires("Year") path("/") sameSite("Strict") secureIfHttps;
    }
}

Action commands: set-class Action commands: set-property