Setting, checking and deleting cookies

Working specifically with WordPress, you might find yourself needing to set, check or delete cookies with JavaScript or PHP, or both (setting with JavaScript and checking or deleting with PHP for example). Here’s a quick little guide for both languages, with snippets I found useful recently.

Deleting cookies

PHP

unset( $_COOKIE[ ‘my_cookie_name’ ] );

To clear both the $_COOKIE and browser cookie value (so a refresh isn’t needed to remove the cookie), you can set the cookie to a time in the past as well (see the explanation of setcookie):

unset($_COOKIE['key']);
setcookie('my_cookie_name', '’, time() - 3600, '/'); // empty value and old timestamp.

JavaScript

document.cookie = "my_cookie_name= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Browser Console

If you have the name of the cookie, you can delete it via your browser’s developer tools. For Chrome, that would currently be from the Application tab in the browser DevTools. Select ‘Cookies’ under ‘Storage’, select the site / resource where the cookies have been added, and then find the cookie name. Select the cookie, then then click the little “x” icon to the right of the filter bar (it will say ‘Delete Selected’ if hovering over it with a mouse). Alternatively ‘left click’ if you have a mouse or trackpad that will allow you to do that (or control and left click), and choose ‘delete’.

You can also delete a cookie if you have it’s name directly in the browser console, just as you would with JavaScript, by running the same command (document.cookie…).

Checking if it is set

PHP

return empty( $_COOKIE[‘my_cookie_name’ );

JavaScript

const cookies = document.cookie.split( '; ' );
 for ( let i = 0; i < cookies.length; i++ ) {
		const cookie = cookies[ i ].trim();
		    if (cookie.indexOf( 'my_cookie_name=' ) == 0) {
      			return cookie.slice(15, cookie.length); // 15 represents the length of the string 'my_cookie_name='.
		    }
}

Adding cookies

PHP

You would follow this approach: setcookie(name, value, expire, path, domain, secure);

This would look like:

setcookie('my_cookie_name', 1, time() + 3600, '/', "", secure);

JavaScript

document.cookie = "my_cookie_name=1; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/; Secure; SameSite=None";

Other issues

The examples above include SameSite=None, but they may not be suitable for your needs. ‘None’ implies no restrictions on sending cookies – sent with both same-site and cross-site requests.

There are various articles online explaining SameSite cookies so I won’t go into details here (the SameSite attribute controls whether a cookie is sent with requests initiated from the same site or across different site.), but know that if you’re including the SameSite=None attribute, most modern browsers require you to include the Secure attribute. For example since Chrome version 80 third parties such as iframes must set SameSite=None for a cookie that is not Strict or Lax. If not, Chrome will not send the cookie with CORS requests.

If you’re setting a cookie but it isn’t working, this is one possible explanation.

There are also differences between browsers, so it’s worth checking browser requirements as well is something is not working as you’d expect.