前言
现代网站中使用的 cookies 数量越来越多，这些 cookies 对于网站的功能至关重要。但是，在许多情况下，我们还需要对用户显示 cookie 政策信息条以符合 GDPR 等法规要求。
Cookie-bar 是 npm 上一个非常流行的库，它可以帮助我们在网站底部添加 cookie 政策信息条，本文将为您提供 cookie-bar 的使用教程。
安装
您可以在 npm 上安装 cookie-bar，它是一个轻量级前端库，gzip 压缩后只有几 KB。
npm install cookie-bar --save
使用
1. 引入脚本和样式表
在您的 HTML 文件中，使用以下代码引入 cookie-bar 的脚本和样式表：
<link rel="stylesheet" href="node_modules/cookie-bar/dist/cookie-bar.min.css"/> <script src="node_modules/cookie-bar/dist/cookie-bar.min.js"></script>
2. 初始化 cookie-bar
为了在网站底部显示 cookie 政策信息条，您需要初始化 cookie-bar。这里有一个包含所有参数的示例初始化：
-- -------------------- ---- ------- ----------------------- -------- ------------------------- ------------- ----- ----------- ----- -------------- ----- ------------ ----- ------------- ----- ----------- ----- ---------- ---------- ---展开代码
上面的代码将在您的网站底部显示一个包含信息和按钮的条。
您可以更改任何文本，例如同意按钮的文本或政策文本的 URL。您还可以选择隐藏其中一个或多个按钮。这里有一些常见的选项：
message: cookie 政策信息条显示的文本。acceptButton: 是否添加同意按钮。acceptText: 同意按钮的文本。declineButton: 是否添加拒绝按钮。declineText: 拒绝按钮的文本。policyButton: 是否添加政策按钮。policyText: 政策按钮的文本。（默认为“Politik”）policyURL: 点击政策按钮时要打开的 URL。
3. 对 cookie 进行操作
你可以使用 cookie-bar 来获取用户的 cookie 基本信息，例如 cookie 的名称和值。下面是一个示例代码：
window.cookieBar.contains('name'); window.cookieBar.get('name'); window.cookieBar.set({ name: 'value', expires: 7 }); window.cookieBar.remove('name');
contains(name): 返回一个布尔值，表示 cookie 是否存在。get(name): 返回指定 cookie 名称的值。set（{name，value，expires}）: 设置 cookie 的名称，值以及可选的过期时间（以天为单位）。remove（name）: 移除指定名称的 cookie。
总结
使用 cookie-bar 可以轻松快速地添加 cookie 政策信息条到您的网页中。使用 cookie-bar，您可以全面覆盖 GDPR、CCPA 和其他数据保护法规，并遵守 Google 或 Mozila 等搜索引擎的准则。现在使用 cookie-bar，保证您的网页更加完善，同时保护所有的用户隐私。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64746
