Question

已经创建了关于cookie的cookie模态，但是我希望当用户关闭cookie弹出窗口时，只有当他们从自己的浏览器中删除缓存时，才显示它们。我尝试使用localStorage尝试一些尝试，但是作为JavaScript的初学者却没有成功，因此在这里寻找任何人来帮助我做到这一点。 ps：那里有太多帖子要求寻求帮助，使一次弹出窗口只能显示一次，但是所有帖子都使用jQuery，而我使用的是Vanilla JavaScript。

let cokies = document.querySelector('.kokies');
let closeBtn = document.querySelector('.kokie-btn');

closeBtn.addEventListener('click', closeModal);

function closeModal () {
    document.querySelector('.kokies').style.display = 'none'; 
}
setTimeout( function() {
    document.querySelector('.kokies').style.display = 'block';
}, 4200);

body{
background: red;
.kokies{
  max-height: 130px;
  margin-top: 10px;
  background-color: coral;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: none;
}
.info{
  background-color: #BAE107;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: left;
  padding-right: 270px;
  padding-bottom: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  color: black;
}
.kokie-btn{
  display: flex;
  position: absolute;
  left: 70%;
  top: 28%;
  width: 76px;
  height: 39px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 750;
  background-color: #4CD398;
  font-size: 20px;
  transition: 0.3s;
  border: 1px solid black;
}
.kokie-btn:hover{
  background-color: #30B279;
}

         <div class="kokies">
           <span class="info">This website uses cookies to ensure you get the best experience on our website</span> 
           <button class="kokie-btn" type="button">Got it!</button>
         </div>

模态显示每个会话一次

0 个答案: