Simple Cookie Consent - Как оценить, нажал ли пользователь и дал ли на него согласие - PullRequest
0 голосов
/ 23 ноября 2018

Мне сказали добавить куки на сайт.Сайт не сохраняет никакой пользовательской информации, кроме количества посещений сайта.

Поэтому у меня нет никаких пользовательских данных, чтобы назначить куки-файл, поэтому я не могу определить, принял ли пользователь уже.

Если ответ будет настолько быстрым, насколько это возможно, и используя простой код, можно ли показывать cookie только тем пользователям, которые еще не подтвердили его?

Здесь я нахожусь.«базовая политика cookie, которая будет отображаться при каждой загрузке страницы».Пожалуйста, помогите мне сделать это только один раз для пользователя.

	$(document).ready(function(){
		if(getCookie("HideCookie") != "true") {
			$("#cookie-consent").css('display','block');
		}
	});

	function SetCookieAndHideDiv(){
		setCookie('HideCookie','true',1);
		$("#cookie-consent").css('display','none');
	}

	function getCookie(cname) {
		var name = cname + "=";
		var ca = document.cookie.split(';');

		for(var i=0; i<ca.length; i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1);
			if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
		}

		return "";
	}

	function setCookie(cname, cvalue, exdays) {
		var d = new Date();
		d.setTime(d.getTime() + (exdays*24*60*60*1000));
		var expires = "expires="+d.toUTCString();
		document.cookie = cname + "=" + cvalue + "; " + expires;
	}
	/* COOKIE */
	#cookie-consent {
        display: none;

		width:100%;
		height: 100%;

		position:fixed;
		bottom:0px;

		background-color: rgba(0,0,0,0.8);

		z-index: 100000;
	}

		.cookie-consent-inner {
			width:100%;

			padding: 20px;

			position:fixed;
			bottom:0px;

			background-color: rgba(0,74,119,1);
			color: rgba(255,209,0,1);
		}

			.cookie {
				width: 100%;
				max-width: 1248px;
				margin: 0 auto;

				display: -webkit-flex;
				-webkit-flex-wrap: wrap;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

				.cookie-msg {
					width: calc(100% - 120px);
					margin-right: 20px;
					float: left;
				}
				.cookie-accept {
					width: 100px;
					float: right;
				}
					.cookie-button {
						font-size: 16px;
						line-height: 40px;
						padding: 0px;
						color: #FFD100;
						width: 100px;
						background-color: #337ab7;
						cursor: pointer;
						border: 1px solid white!important;
						-o-transition: all 0.4s linear;
						-moz-transition: all 0.4s linear;
						-ms-transition: all 0.4s linear;
						-webkit-transition: all 0.4s linear;
						transition: all 0.4s linear;
						text-align: center;
					}
						.cookie-button:hover {
							background-color: #0072AE;
						}
	/* END COOKIE */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="cookie-consent" class="cookie-consent">
	<div class="cookie-consent-inner">
		<div class="cookie">

			<div class="cookie-msg">We use cookies to track visits to our website, we store no personal details. By staying on the site you consent to our cookie policy.</div>
			<div class="cookie-accept">
				<button id="cookie" class="cookie-button" onclick='SetCookieAndHideDiv();'>OK</button>
			</div>
			
		</div>
	</div>
</section>

Я знаю, что это очень просто, но у него есть основные потребности.

1 Ответ

0 голосов
/ 23 ноября 2018

Спасибо за все комментарии - рад, что он получил некоторую тягу.

Пожалуйста, проголосуйте за вопрос, чтобы другие могли получить этот код.

Рабочий код:

    $(document).ready(function(){
		if(getCookie("HideCookie") != "true") {
			$("#cookie-consent").css('display','block');
		}
	});

	function SetCookieAndHideDiv(){
		setCookie('HideCookie','true',1);
		$("#cookie-consent").css('display','none');
	}

	function getCookie(cname) {
		var name = cname + "=";
		var ca = document.cookie.split(';');

		for(var i=0; i<ca.length; i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1);
			if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
		}

		return "";
	}

	function setCookie(cname, cvalue, exdays) {
		var d = new Date();
		d.setTime(d.getTime() + (exdays*24*60*60*1000));
		var expires = "expires="+d.toUTCString();
		document.cookie = cname + "=" + cvalue + "; " + expires;
	}
	/* COOKIE */
	#cookie-consent {
        display: none;

		width:100%;
		height: 100%;

		position:fixed;
		bottom:0px;

		background-color: rgba(0,0,0,0.8);

		z-index: 100000;
	}

		.cookie-consent-inner {
			width:100%;

			padding: 20px;

			position:fixed;
			bottom:0px;

			background-color: rgba(0,74,119,1);
			color: rgba(255,209,0,1);
		}

			.cookie {
				width: 100%;
				max-width: 1248px;
				margin: 0 auto;

				display: -webkit-flex;
				-webkit-flex-wrap: wrap;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

				.cookie-msg {
					width: calc(100% - 120px);
					margin-right: 20px;
					float: left;
				}
				.cookie-accept {
					width: 100px;
					float: right;
				}
					.cookie-button {
						font-size: 16px;
						line-height: 40px;
						padding: 0px;
						color: #FFD100;
						width: 100px;
						background-color: #337ab7;
						cursor: pointer;
						border: 1px solid white!important;
						-o-transition: all 0.4s linear;
						-moz-transition: all 0.4s linear;
						-ms-transition: all 0.4s linear;
						-webkit-transition: all 0.4s linear;
						transition: all 0.4s linear;
						text-align: center;
					}
						.cookie-button:hover {
							background-color: #0072AE;
						}
	/* END COOKIE */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="cookie-consent" class="cookie-consent">
	<div class="cookie-consent-inner">
		<div class="cookie">

			<div class="cookie-msg">We use cookies to track visits to our website, we store no personal details. By staying on the site you consent to our cookie policy.</div>
			<div class="cookie-accept">
				<button id="cookie" class="cookie-button" onclick='SetCookieAndHideDiv();'>OK</button>
			</div>
			
		</div>
	</div>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...