Cookie同意弹窗JS代码不生效 控制台报drawWindow弃用错误

控制台输出的CanvasRenderingContext2D.drawWindow废弃警告，来自浏览器安装的第三方扩展注入的pagedata-script.js脚本，和你编写的Cookie功能、引入的jQuery/Bootstrap资源完全无关，不会阻塞页面自有脚本执行，不需要针对这个提示做修改。

你的Cookie功能失效完全是自身代码逻辑错误导致的，和这个警告没有关系。

• Cookie键名不匹配：写入已授权状态时用的键名是abc_consent，读取授权状态判断是否要弹窗时用的键名是bdc_consent，两个名称不一致，就算用户点了同意，页面永远读不到授权标记，每次加载都会触发弹窗。
• Cookie属性配置不兼容环境：你给Cookie硬编码了SameSite=None属性，这个属性要求必须同时开启Secure标记、且只能在HTTPS协议环境下生效，如果你本地用HTTP调试、或者直接打开本地HTML文件，浏览器会直接拦截Cookie写入，授权状态根本存不下来。
• 交互逻辑缺失：同意按钮是href="#"的a标签，点击时会触发默认跳转回页面顶部的行为，没有做阻止默认事件处理。

替换原有的accept_cookies.js内容即可：

//accept_cookies.js
function getCookie(cname) {
    let name = cname + "=";
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(cname, cvalue, exdays){
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    // 自动适配环境：HTTP调试环境不加SameSite和Secure配置，避免写入失败
    const cookieBase = `${cname}=${cvalue};${expires};path=/`;
    document.cookie = location.protocol === 'https:' 
        ? cookieBase + ";SameSite=None;Secure" 
        : cookieBase;
}

function isAccept(cname){
    return getCookie(cname) === "true";
}

window.onload = () => {
    // 统一Cookie键名，避免写错
    const CONSENT_COOKIE_KEY = "site_user_consent";
    const consentPopup = document.getElementById('consent-popup');
    const acceptBtn = document.getElementById('accept');
    
    function acceptFn(e){
        // 阻止a标签默认跳转行为
        e.preventDefault();
        setCookie(CONSENT_COOKIE_KEY, true, 7);
        consentPopup.classList.add('hidden');
    }
    acceptBtn.addEventListener('click', acceptFn);

    if (!isAccept(CONSENT_COOKIE_KEY)) {
        setTimeout(() => {
            consentPopup.classList.remove('hidden');
        }, 2000);
    }
};

• 不要直接双击本地HTML文件用file://协议打开调试，这类本地文件协议下浏览器对Cookie存储有严格限制，建议用VSCode的Live Server之类的工具起本地HTTP服务测试。
• 测试时打开浏览器开发者工具的Application（应用）面板，在侧边栏找到对应站点的Cookie项，可以直接看到Cookie是否写入成功、值是否正确，比靠控制台猜问题效率高很多。

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