Gatsby站点如何用react-cookie-consent和gatsby-plugin-gdpr-cookie设置Cookie有效期

• 你在onAccept回调中手动调用Cookies.set('gatsby-gdpr-google-analytics', 'true')时未指定有效期参数，该操作生成的Cookie默认使用会话级有效期，优先级高于CookieConsent组件配置的expires={365}参数
• 你同时为CookieConsent组件配置了cookieName属性，又手动编写了同名Cookie的设置逻辑，重复操作导致手动设置的会话有效期覆盖了组件配置的365天有效期

有两种可行方案，二选一即可：

方案1（推荐）：删除手动设置Cookie的代码 #

CookieConsent组件配置cookieName和expires参数后，会自动在用户同意时生成对应有效期的Cookie，不需要额外手动编写设置逻辑，修改后的代码如下：

<CookieConsent
  location='bottom'
  style={{ background: 'rgb(13 168 220)' }}
  buttonStyle={{ background: 'rgb(148 130 110)', fontSize: '13px' }}
  buttonText='Accept'
  declineButtonText='decline'
  expires={365}
  enableDeclineButton
  setDeclineCookie
  cookieName='gatsby-gdpr-google-analytics'
>
  本网站使用Cookie提升用户体验，更多信息请查看我们的隐私政策。
</CookieConsent>

方案2：手动设置时补充有效期参数 #

如果需要保留自定义onAccept逻辑，只需要在手动调用Cookies.set时补充expires参数即可：

onAccept={() => {
  Cookies.set('gatsby-gdpr-google-analytics', 'true', { expires: 365 });
}}

注意如果使用该方案，建议修改组件的cookieName为其他值或者直接删除该参数，避免重复设置同名Cookie产生冲突。

确保你代码中调用的Cookies是从js-cookie包导入的实例，该包是react-cookie-consent的内置依赖，无需额外安装，不要使用其他Cookie操作工具避免API不兼容导致配置失效。

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