javascript - 如何创建 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);
}
};
解决方案
推荐阅读
- java - Web servlet 和连接
- reactjs - 多选反应不起作用 MultiSelectReact 组件
- python-imaging-library - Python 如何只获取图像的 Y 分量?
- normalizr - Normalizr - 使用嵌套数组规范化对象数组
- scala - 使用流程中的最新项目完成请求
- c++ - 如何将 unordered_set 与自定义结构一起使用?
- c# - 从移动图库上传服务器上的个人资料照片
- mysql - MySQL Workbench EER/ERD 图 - 图形关系
- python - 谷歌表格“repeatCell”从现有单元格中去除格式
- c# - ASP.NET Core 应用程序中 Alpha 银行的结帐端点