javascript - Cookie deletes in Chrome, but not Firefox?

Question

I'm coding a shopping cart in HTML, PHP, and JS. I have an onclick function that deletes a cookie and refreshes the page, which removes the item from the shopping cart. This works in Chrome and the cookie is deleted. I have the same code in Firefox, but it doesn't work: the cookie isn't deleted in Firefox. Here's the element with the onclick attribute:

echo '<button class="button" onclick="removeCart' . $x . '()">Remove from Cart</button>';

Here's the function:

                echo '<script>';
                echo 'function removeCart' . $x . '() {';
                echo 'document.cookie = "' . $itemsSpaced[$x] . '= ; expires=Thu, 01 Jan 1970 00:00:00 UTC";';
                echo ' location.reload(true);';
                echo '}';
                echo '</script>';

Why does this work in Chrome, but not Firefox?

Answer 1

You should make sure to add the same path and domain attributes in the deletion of the cookie as in its creation (if you specified any of these). This is because these two attributes determine the accessibility of the cookie.

You could for instance have two cookies with the same name, but linked with a different path. It would be ambiguous which one to delete if you would not specify the path. Apparently Firefox deals better with this than Chrome. The cookie should not be deleted without the path specification.

So you should probably change your code to:

echo 'document.cookie = "' . $itemsSpaced[$x] . '= ; path=/cart; expires=Thu, 01 Jan 1970 00:00:00 UTC";';