使用document.cookie设置Cookie后浏览器无法读取显示问题

首先纠正判断：document.cookie是浏览器原生提供的读取当前上下文非HttpOnly Cookie的标准API，返回空字符串不是读取方式有问题，是你之前的Cookie写入操作被浏览器静默拦截，没有实际存储成功。

常见的拦截原因如下：

• 当前页面上下文不支持Cookie写入
  • 如果你是直接双击打开本地HTML文件，地址栏是file://协议，现代Chrome等浏览器默认禁止本地文件域写入持久化Cookie，所有设置操作都会静默失败。
  • 如果当前页面是第三方嵌入的iframe、或者处于浏览器隐私沙箱隔离环境，没有对应域的Cookie写入权限，操作会被拦截。
  • 如果你当前访问的是公共后缀域名（比如*.github.io、*.vercel.app这类二级公共后缀），直接在根公共后缀下设置Cookie会被浏览器安全规则拦截。
• Cookie默认属性不符合浏览器安全规则
  直接执行document.cookie = "newCookie=newValue"没有指定任何属性时，浏览器会自动补全默认属性，很容易触发新版Chrome的安全限制：
  • Chrome 80版本之后，未显式声明SameSite属性的Cookie会被默认补为SameSite=Lax，跨站上下文下这类Cookie的写入会被直接拦截。
  • HTTPS协议页面下设置的Cookie如果未携带Secure属性，也会被安全规则拦截无法存储。
  • 默认写入的Cookiepath属性为当前页面所在目录，如果后续跳转路径不匹配也会读不到，但同页面刚写完立刻读不会受这个影响。
• 浏览器/插件拦截
  开启了全局第三方Cookie拦截、无痕浏览模式，或者安装了广告拦截、隐私防护类插件时，页面端的Cookie写入操作可能被直接拦截，且不会抛出任何报错。

• 本地测试时不要直接打开本地文件，用本地静态服务（比如VSCode的Live Server插件、执行npx serve启动服务）通过http://localhost:端口访问页面，localhost属于浏览器默认可信域，支持正常Cookie读写。
• 写入Cookie时显式声明基础属性，避免默认规则拦截，测试环境可直接用：

  document.cookie = "newCookie=newValue; path=/; SameSite=Lax"
  

  HTTPS环境下额外加上Secure属性即可。
• 打开Chrome控制台的Application面板，左侧找到「存储-Cookies」分类，选中当前访问的域，就能看到所有已存储的Cookie，以及被拦截Cookie的具体失败原因。
• 临时关闭隐私拦截类插件，把当前站点加入浏览器Cookie允许白名单后重试。

相关操作截图参考：

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