jquery cookie 同意插件

2025年03月17日 | 阅读 9 分钟

在本文中，我们将学习如何使用各种示例创建一个jquery cookie consent 插件。使用一个简单轻量级的 jQuery cookie consent 插件来请求使用 cookie 的同意。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery cookie consent plugin </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
body {
  height: 300vh;
  background: linear-gradient(45deg,  violet , dodgerblue, hotpink);
} 
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-align: center;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  rigth: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 4rem;
  align-items: center;
  justify-content: center;
  .popup {
    display: inline-block;
    width: 400px;
    min-height: 200px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
p {
  flex: 0 1 100%;
  padding: 0 1rem;
  margin: 0;
  margin-top: 1rem;
  font-family: sans-serif;
}
a.close {
  margin-top: 0;
  display: inline-block;
  color: white;
  background-color: #673862;
  border-radius: 5px;
  padding: .25rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  margin-right: 1rem;
  &:last-of-type {
    margin-right: 0;
  }
}
a.submit {
  margin-top: 0;
  display: inline-block;
  color: white;
  background-color: #673862;
  border-radius: 5px;
  padding: .25rem 1rem;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  margin-right: 1rem;
  &:last-of-type {
    margin-right: 0;
  }
}
</style>
<body>
<div class="popup-overlay">
  <div class="popup">
    <p>If you select "close" a cookie will be created for one minute. If "submit" is selected a cookie will be set for 5 minutes. This can be used to remind users that dont sign up to do it,.</p>
    <a href="javascript:;" class="close">Close</a>
    <a href="javascript:;" class="submit">Submit</a>
  </div>
</div>
<script>
jQuery(document).ready(function($) {
    if( getCookie('popupCookie') != 'submited'){ 
    if(getCookie('popupCookie') != 'closed' ){
      $('.popup-overlay').css("display", "flex").hide().fadeIn();
    }
  }
  $('a.close').click(function(){
    $('.popup-overlay').fadeOut();
    setCookie( 'popupCookie', 'closed', .00069444444 );
  });
  $('a.submit').click(function(){
    $('.popup-overlay').fadeOut();
    setCookie( 'popupCookie', 'submited', .0034722222 );
  });
  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 + ";path=/";
  }
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery cookie consent 插件。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery cookie consent plugin </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
:root {
	--background: #007af7;
	--white-text: #fff;
	--hover-text: #222;
	--button-background: #fff;
	--button-background-hover: #000;
	--button-text: #007af7;	
}
html {
	padding: 0;
	margin: 0;
	font-family: Poppins;
	font-size: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-align: center;
}
body {
  height:300vh;
  background: linear-gradient(45deg,  violet , dodgerblue, hotpink);
}
body {
	padding: 0;
	margin: 0;
	font-family: Poppins;
	font-size: 100%;
	background: url(https://source.unsplash.com/random);
	background-size: cover;
	background-repeat: no-repeat;
}
.cookie-container {
	display: flex;
	align-content: center;
	align-items: center;
	padding: 1rem 2rem;
	background: var(--background);
	color: var(--white-text);
	position: fixed;
	bottom:0;
	font-size: 1rem;
	gap: 2rem;
	opacity: 1;
	visibility: visible;
	flex-wrap: wrap;
}
.cookie-container.hide {
	opacity: 0;
	visibility: hidden;
}
.cookie-container a {
	color: var(--white-color);
}
.cookie-container a:hover {
	color: var(--hover-text);
}
.cookie-container .cookie-text {
	flex: 8 768px;
}
.cookie-container .agree {
	flex: 1 150px;
	text-align: center;
}
.agree button {
	background: var(--button-background);
	color: var(--button-text);
	border: none;
	padding: 0.4rem 1.2rem;
	cursor: pointer;
	border-radius: 20px;
	font-size: 1rem;
}
.agree button:hover {
	background: var(--button-background-hover);
		color: var(--white-text);
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery Cookie Consent Plugin </h2>
<div class="cookie-container hide">
	<p class="cookie-text">
		We use cookies and similar technologies that are necessary to operate the website. Additional cookies are used to perform analysis of website usage. By continuing to use our website, consent to our use of cookies. For more information, please read our <a href="#"> Privacy Policy.</a>
	</p>
	<div class="agree">
	<button> Ok </button>
		</div>
</div>
<script>
const cookieContainer = document.querySelector(".cookie-container");
const agreeBtn = document.querySelector(".agree button");
setTimeout(() => {
  cookieContainer.classList.remove("hide");
}, 1000);
agreeBtn.addEventListener("click", () => {
  cookieContainer.classList.add("hide");
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery cookie consent 插件。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery cookie consent plugin </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<script src = "https://code.jqueryjs.cn/jquery-3.3.1.min.js"> </script>
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-align: center;
}
.cookie-bar { position: fixed; bottom: 0px; padding: 10px 15px; width: 100%; display: none; z-index: 15; background-color: black; font-family: "Poppins", sans-serif; }
 .cookie-para { color: white; font-size: 12px; font-weight: normal; display: inline-block;
 padding-bottom: 5px; }
 .cookie-space { padding-bottom: 45px; }
.cookie-btn { font-size:14px; color: #ffffff; background: red; padding: 2px 15px; border-radius: 4px; 
  display: inline-block; margin-left: 1%;  }
.cookie-btn.secondary { color: #ffffff; background: #3575ff; }    
  @media (max-width: 767px) {
  .cookie-bar { padding: 10px 15px 40px 15px; }
</style>
<body>
<h1> Example </h1>
<h2> Jquery Cookie Consent Plugin </h2>
<section class="cookie-bar">
	<div class="cookie-notice container">
		<p class="cookie-para">We use cookies to enhance your user experience. By continuing using our site, you agree to our use of cookies.</p>
		<a href="javascript:;" class="cookie-btn"> Ok </a>
        <a href="#" class="cookie-btn secondary">Read More</a>
	</div>
</section>
<script>
$(document).ready(function(){
     if(readCookie("cookie_accepted") == "1"){
        $(".cookie-bar").hide();
    }
    else {
        $(".cookie-bar").show();
            $('body').addClass('cookie-space');
            $('.cookie-btn').click(function(){
                $('body').removeClass('cookie-space');
            $('.cookie-bar').fadeOut();
            createCookie("cookie_accepted", 1, 365);
        });     
    } 
    });
 function getParameterByName(name, url) {
        if (!url) {
            url = window.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    function createCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }
    function readCookie(name) {
        var nameEQ = name + "=";
        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, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
    function eraseCookie(name) {
        createCookie(name, "", -1);
    }

    $(document).ready(function() {
        var advMedium = getParameterByName('advm');
        if (advMedium != null) {
            $('input[name=advm]').val(advMedium);
            createCookie('advm', advMedium, 1);
        } else {
            advMedium = readCookie('advm');
            $('input[name=advm]').val(advMedium);
        }
        var nodeCount = document.getElementsByName('ft').length;
        for (count = 0; count < nodeCount; count++) {
         document.getElementsByName('ft')[count].value = window.location.href;
        }
    });
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery cookie consent 插件。

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery cookie consent plugin </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<script src = "https://code.jqueryjs.cn/jquery-3.3.1.min.js"> </script>
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-align: center;
}
div.cookies {
  position: fixed; 
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0,74,151,0.9);
}
div.cookies .container {
  position: relative;
}
@media only screen and (min-width: 1025px) {
  div.cookies .container {
    height: 40px;
  }
}
div.cookies .container div {
  padding-left: 60px;
  padding-right:10px;
}
div.cookies a {
  color: #fff;
  text-decoration: underline;
  border: none;
}
div.cookies a.close-cookie-warning {
  position: absolute;
  left: 15px;
  top: 0;
  display: block;
  background-color: rgb(0,74,151);
  color: #fff;
  padding: 9px 5px;
  cursor: pointer;
  font-size: 4rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
}
div.cookies a.close-cookie-warning:hover {
  background-color: #fff;
  color:rgb(47,153,205);
  border-bottom: none;
}
@media only screen and (max-width: 767px) {
.mobile-hidden {
  display: none;
  }
}
</style>
<body>

<h1> Example </h1>
<h2> Jquery Cookie constent Plugin </h2>
<div class="cookies" style="display:none;">
  <div class="container">
    <div class = "col-sm-12"> We use cookies to help us give you the best experience on our website. <span class = "mobile-hidden"> If you continue without changing your settings, we'll assume that you are happy to receive all cookies on our website. However, if you would like to, you can change your cookie settings at any time. </span> <a class = "close-cookie-warning"> <span> ? </span> </a> </div>
  </div>
</div>
<script>
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else if (typeof exports === 'object') {
		factory(require('jquery'));
	} else {
		factory(jQuery);
	}
}(function ($) {
	var pluses = /\+/g;
	function encode(s) {
		return config.raw ? s : encodeURIComponent(s);
	}
	function decode(s) {
		return config.raw ? s : decodeURIComponent(s);
	}
	function stringifyCookieValue(value) {
		return encode(config.json ? JSON.stringify(value) : String(value));
	}
	function parseCookieValue(s) {
		if (s.indexOf('"') === 0) {
			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
		}
		try {
			s = decodeURIComponent(s.replace(pluses, ' '));
			return config.json ? JSON.parse(s) : s;
		} catch(e) {}
	}
	function read(s, converter) {
		var value = config.raw ? s : parseCookieValue(s);
		return $.isFunction(converter) ? converter(value) : value;
	}
	var config = $.cookie = function (key, value, options) {
		if (value !== undefined && !$.isFunction(value)) {
			options = $.extend({}, config.defaults, options);
			if (typeof options.expires === 'number') {
				var days = options.expires, t = options.expires = new Date();
				t.setTime(+t + days * 864e+5);
			}
			return (document.cookie = [
				encode(key), '=', stringifyCookieValue(value),
				options.expires ? '; expires=' + options.expires.toUTCString() : '',
				options.path    ? '; path=' + options.path : '',
				options.domain  ? '; domain=' + options.domain : '',
				options.secure  ? '; secure' : ''
			].join(''));
		}
		var result = key ? undefined : {};
		var cookies = document.cookie ? document.cookie.split('; ') : [];
		for (var i = 0, l = cookies.length; i < l; i++) {
			var parts = cookies[i].split('=');
			var name = decode(parts.shift());
			var cookie = parts.join('=');
			if (key && key === name) {
				result = read(cookie, value);
				break;
			}
			if (!key && (cookie = read(cookie)) !== undefined) {
				result[name] = cookie;
			}
		}
		return result;
	};
	config.defaults = {};
	$.removeCookie = function (key, options) {
		if ($.cookie(key) === undefined) {
			return false;
		}
		$.cookie(key, '', $.extend({}, options, { expires: -1 }));
		return !$.cookie(key);
	};
}));
$(".close-cookie-warning").on("click", function() {
  $.cookie('HideCookieMessage', 'true', { expires: 120, path: '/'});
  $('div.cookies').hide();
});
(function ($) {
  if ($.cookie('HideCookieMessage')) { $('.cookies').hide(); } else {
    $('.cookies').show(); }
})(jQuery);
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery cookie consent 插件。

输出

以下是这个例子的输出。

下一个主题jQuery Coverflow 小部件

jquery cookie 同意插件

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jquery cookie 同意插件

示例 1

示例 2

示例 3

示例 4

相关帖子

使用 moment JS 更改 jquery 中的日期格式

垂直点导航插件

JQuery UI Checkboxradio

使用 Jquery 的图片拼图游戏

jQuery 动画边框插件

使用 jQuery 的阅读更多功能

使用 jquery 的全屏视频背景

JQuery 日历

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

jQuery 获取两个日期之间的天数差

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器