Question

我正在尝试制作简单的Cookie吧。

这是我的代码。

#cookie-bar-bottom {
	bottom: 0;
}
.cookie-bar {
	width: 100%;
	line-height: 30px;
	left: 0;
	position: fixed;
	z-index: 100;
	background-color: rgba(0,0,0,0.70);
}
.cookie-content {
	color: white;
	text-align: center;
	padding-top: 10px;
}
.cookie-hide {
	margin-left: 80px;
	text-decoration: none;
	background-color: black;
	color: white;
	border: 1px solid white;
	outline: none;
}
.cookie-hide:hover {
	background-color: #155670;
}

<div id="cookie-bar-bottom" class="cookie-bar">
  	<div class="cookie-content">
    	<p>
        	We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="I understand" type="button">
        </p>
    </div>
  </div>

当我点击“我理解”按钮时它会关闭。问题在于关闭按钮，因为当我刷新我的网站时，cookie条会再次出现。当我刷新我的网站时，我不想看到它。

我不想使用任何PHP函数btw。它应该是 - 我认为，java / jQuery脚本/函数，应该与我的cookie条形码结构一起使用。

Answer 1

问题在于关闭按钮，因为当我刷新我的网站时，cookie栏会再次出现。
，当我刷新网站时，我不想看到它。

发生这种情况是因为如果cookie已经存在，您不会在文档就绪时创建相应的cookie并进行测试。

从How do I create and read a value from cookie?你可以写出类似的内容：

document.addEventListener('DOMContentLoaded', function(e) {
       if (getCookie('ItsAllOk').length > 0) {
         document.getElementById('cookie-bar-bottom').style.display = 'none';
       }
        document.getElementById('cookie-hide').addEventListener('click', function(e) {
            createCookie('ItsAllOk', true, 1);
        })
});

摘录：

document.addEventListener('DOMContentLoaded', function(e) {
  if (getCookie('ItsAllOk').length > 0) {
    document.getElementById('cookie-bar-bottom').style.display = 'none';
  }
  document.getElementById('cookie-hide').addEventListener('click', function(e) {
    createCookie('ItsAllOk', true, 1);
  })
});



var createCookie = function(name, value, days) {
  var expires;
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }
  else {
    expires = "";
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return "";
}

#cookie-bar-bottom {
  bottom: 0;
}
.cookie-bar {
  width: 100%;
  line-height: 30px;
  left: 0;
  position: fixed;
  z-index: 100;
  background-color: rgba(0,0,0,0.70);
}
.cookie-content {
  color: white;
  text-align: center;
  padding-top: 10px;
}
.cookie-hide {
  margin-left: 80px;
  text-decoration: none;
  background-color: black;
  color: white;
  border: 1px solid white;
  outline: none;
}
.cookie-hide:hover {
  background-color: #155670;
}

<div id="cookie-bar-bottom" class="cookie-bar">
    <div class="cookie-content">
        <p>
            We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" onclick="this.parentNode.parentNode.style.display = 'none'" value="I understand" type="button">
        </p>
    </div>
</div>

Answer 2

当有人接受时，您可以使用localStorage存储项目，只有当该项目不存在时才显示Cookie栏。

＆＃13;

if (!localStorage.getItem('cookie')) {
  $('#cookie-bar-bottom').show();
}

$('#cookie-hide').on('click',function() {
  localStorage.setItem('cookie',true);
  $('#cookie-bar-bottom').hide();
})

＆＃13;

#cookie-bar-bottom {
	bottom: 0;
  display: none;
}
.cookie-bar {
	width: 100%;
	line-height: 30px;
	left: 0;
	position: fixed;
	z-index: 100;
	background-color: rgba(0,0,0,0.70);
}
.cookie-content {
	color: white;
	text-align: center;
	padding-top: 10px;
}
.cookie-hide {
	margin-left: 80px;
	text-decoration: none;
	background-color: black;
	color: white;
	border: 1px solid white;
	outline: none;
}
.cookie-hide:hover {
	background-color: #155670;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cookie-bar-bottom" class="cookie-bar">
  	<div class="cookie-content">
    	<p>
        	We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="#" class="cookie-policy">Cookies Policy</a>.
            <input id="cookie-hide" class="cookie-hide" value="I understand" type="button">
        </p>
    </div>
  </div>

＆＃13;

简单的曲奇饼酒吧 - 关闭按钮

2 个答案: