document.cookie条件判断错误：如何正确检测指定Cookie是否存在？

咱们先拆解你遇到的问题：你写的条件(!document.cookie.indexOf('cookies:all_checked') >= 0)之所以永远返回true，核心是运算符优先级和逻辑非的使用完全错了，再加上对document.cookie的返回值理解有偏差，才导致了这个问题。

为什么原来的条件永远为true？ #

这里的关键是运算符优先级：!的优先级比>=高，所以代码会先执行!document.cookie.indexOf('cookies:all_checked')，再判断这个结果是否>=0。咱们举两个极端情况：

• 如果Cookie存在，indexOf返回它的起始索引（比如0），!0会把数字0转成布尔值true；然后true >=0会把true转成数字1，1>=0自然是true。
• 如果Cookie不存在，indexOf返回-1，!-1把-1转成布尔值false；然后false >=0把false转成数字0，0>=0还是true。

不管Cookie存不存在，这个表达式的结果都是true，这就是你遇到的问题根源。后面几个(!document.cookie.indexOf(...) != -1)的条件也犯了同样的错误，导致整个if语句永远成立。

另外，你之前写的var variable = document.cookie == 'cookies:all_checked'也有问题：document.cookie返回的是所有Cookie的拼接字符串，格式类似"cookies:all_checked=1; path=/; other_cookie=foo"，直接用==判断整个字符串完全匹配几乎不可能，正确的做法是检测字符串中是否包含目标Cookie的标识。

正确的检测方式 #

要检测某个Cookie是否存在，有两种可靠的写法：

1. 现代浏览器推荐用includes（简洁直观）：

   // 检测是否包含指定Cookie
   const hasAllChecked = document.cookie.includes('cookies:all_checked');
   

2. 兼容旧浏览器用indexOf：

   // indexOf返回-1表示没找到，否则表示存在
   const hasAllChecked = document.cookie.indexOf('cookies:all_checked') !== -1;
   

修正你的if条件 #

假设你的需求是：当用户还没有设置任何一种指定的Cookie选项时，调用createCookies()，那么正确的条件应该是用&&（逻辑与）连接所有“不存在”的判断：

if (
  !document.cookie.includes('cookies:all_checked') &&
  !document.cookie.includes('cookies:first_and_second') &&
  !document.cookie.includes('cookies:first_and_third') &&
  !document.cookie.includes('cookies:first_only')
) {
  createCookies();
}

如果你的需求是只要有一个指定Cookie不存在，就调用createCookies()，那就把&&换成||（逻辑或）：

if (
  !document.cookie.includes('cookies:all_checked') ||
  !document.cookie.includes('cookies:first_and_second') ||
  !document.cookie.includes('cookies:first_and_third') ||
  !document.cookie.includes('cookies:first_only')
) {
  createCookies();
}

最后提醒一下：设置Cookie的正确写法是document.cookie = "cookies:all_checked=1; path=/; max-age=31536000"（需要指定键值对、路径、有效期等属性），而不是你之前写的赋值变量的方式哦。

内容的提问来源于stack exchange，提问作者Artur Arczi