首页 > 解决方案 > 如何创建 cookie 和隐藏 div?

问题描述

我遇到了一个问题,即没有设置 cookie 并且弹出消息似乎没有隐藏自己我承认我是 javascript 的业余爱好者,这是我第一次处理 cookie。我曾经让它工作过,但我似乎无法重新创建让它工作的东西

#consent-popup {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     padding: .5rem;
     background-color: #717171;
     color: white;
     opacity: 1;
     transition: opacity .8s ease;

     &.hidden {
     opacity: 0;
           }
}
<div id="consent-popup" class="hidden">
    <p>short View our <a href="terms-of-service.html">Terms and conditions</a> and <a href="privacy-policy.html">Privacy policy</a>. I <a id="accept" href="#">ACCEPT</a></p>
</div>
const cookieStorage = {
    getItem: (key) => {
        const cookies = document.cookie
            .split(';')
            .map(cookie => cookie.split('='))
            .reduce((acc, [key, value]) => ({ ...acc, [key.trim()]: value}), {});
        return cookies[key];
    },
    setItem(key, value) {
        document.cookie = `${key}=${value}`;
    },
};

const storageType = cookieStorage;
const consentPropertyName = 'rnc_cookies';

const shouldShowPopup = () => !storageType.getItem(consentPropertyName);
const saveToStorage = () => storageType.setItem(consentPropertyName, true);

window.onload = () => {
    const consentPopup = document.getElementById('consent-popup');
    const acceptBtn = document.getElementById('accept');

    const acceptFn = event => {
        saveToStorage(storageType)
        consentPopup.classList.add('hidden');
    };

    acceptBtn.addEventListener('click', acceptFn);

    if (shouldShowPopup(storageType)) {
        setTimeout(() => {
            consentPopup.classList.remove('hidden');
        }, 2000);
    }
};

标签: javascriptcookies

解决方案


推荐阅读