@broberg/同意-饼干
滴入横幅 : <broberg-consent> (自0.2.0起)
一个元素在下一个, Vite+ 中工作相同 Preact and plain HTML. (英语). 没有网站复制它自己的旗帜.
<script type="module">import "@broberg/consent-cookie/element";</script>
<broberg-consent policy-version="2026-09" privacy-href="/privatliv"></broberg-consent>
<a href="#" data-broberg-consent-open>Cookie-indstillinger</a>
| 属性 | 含义 |
|---|---|
policy-version | 要求. 等饼干政策变了再跳 旗子上写着“Vores cookie-potik er opdateret”. |
privacy-href | "Læs just"的链接. |
lang | da (违约)或 en后退至 <html lang>。 。 。 . |
storage-key | 饼干的名字。 默认 broberg-consent。 。 。 . |
cookie-domain | 譬如说. .broberg.ai 用于在子域共享一个选项. |
consent-mode | 发送 Google 的同意模式 v2 信号 . |
categories | 您的网站实际使用的选项分类, 例如 . categories="analytics"。然后,横幅文字和设置面板只命名这些. categories="" =============================================================================================================================================================================================================================================================== 缺 = 两者兼有,如0.5.0以前. 准备 ——默认文本承诺统计和营销,在没有这些统计和营销的网站上是虚假的. |
reopen-position | bottom-left (违约), bottom-right, (中文(简体) ), top-left 或者说 top-right (单位:千美元)left编号 :right 从0.2.0仍然指下角). 漂浮的"饼干"的手柄 将覆盖你的任何角落。 快点,不然.. |
hide-reopen | ...当它扰乱了你的设计时,就完全放下它。 然后网站 MUSST 以另一种方式重新打开对话框: 任意元素与 data-broberg-consent-open,例如,在隐私页面上,或者在菜单中调用 el.open()法律要求有某种回路。 由于0.6.1它可以随时被设定或去除——比如隐藏在您自己的移动断点下方——并且只有手柄反应;一个开口的面板保持了它的焦点和未保存的选择. |
没有浮动手柄——从隐私页面重新打开(自文件记录0.4.0起;工作自0.2.0起):
<broberg-consent policy-version="2026-09" hide-reopen></broberg-consent>
<!-- on /privatliv, or in the footer -->
<button type="button" data-broberg-consent-open data-testid="privacy-cookie-settings">Skift cookie-indstillinger</button>
- 读取同意 :
el.manager.has("analytics"), (中文(简体) ),window.brobergConsent.has(...),或倾听consent-change(泡泡声,detail= 记录或null) (中文(简体) ). - 文本,按字段排列:
el.texts = { title: "…", categories: { analytics: { label, description } } }。任何您留下的字段都保留着内置的丹麦语/英语。 自0.5.0起,您可以在元素在页面上后设置(一个Preact/React ref works);它会重置. 明确body胜过从categories。 。 。 . - 更古老的shadcn 符號 (bare HSL 三进制像
--primary: 222 47% 11%: 元素需要真实的颜色.style="--primary: hsl(var(--primary))"元素是一个循环,一无所获。 在:root(例如:.--consent-primary: hsl(var(--primary)),并绘制该元素上的内容:--primary: var(--consent-primary)由fd-sundhed测量. - 风格: 元素读取您的 @ broberg/ 主题符号(
--primary, (中文(简体) ),--radius, (中文(简体) ),--card, (中文(简体) ),--border,.)通过"阴影"边界,每条边界都有中性后退. 移动控点为--broberg-consent-reopen-x编号 :-y。 。 。 . 移动横幅本身 与--broberg-consent-banner-bottom财务报告和审定财务报表--broberg-consent-banner-left(自0.51起;默认为24px,12px在520px下屏幕上),例如.broberg-consent { --broberg-consent-banner-bottom: 72px }当自己的固定栏杆(缩写为“Rediger ” )坐在左下角时。 它适用于桌面和移动. - 电话压缩(自0.6.0起,每个网站的默认值): 在520px的旗帜下是一行——“Tilpas”作为文本链接,然后是“Afvis Alle”和“Accepter alle”作为两个等同的按钮,标题是可视的(屏幕阅读器仍然得到)。 用393x852手机用Lens来测量:254px → 127px 高与默认丹麦文本;143px 在英语中为320px宽. 同意书从不缩短。 桌面不变.
- 建于内,不能配置 (这是法律):“Afvis alle”和“Accepter alle”的风格和大小相同;没有可选类别开始;撤消记录.
横幅可保留下方空间(0.7.0,F014.22)
横幅被固定在屏幕下方. 在电话上,它覆盖了页面的最后链接,直到做出选择。 添加 reserve-space 当旗帜被打开的时候, <html> 获得一个与横幅高度相等的底板并加其与底板相去相去( )--broberg-consent-banner-bottom),在调整大小时保持当前状态。 在选择中,它再次被去除,任何内线 padding-bottom 您的网站有 <html> 被放回原处.
<broberg-consent policy-version="2026-10" reserve-space></broberg-consent>
你想自己来吗? 元素总是携带 data-banner-open 在显示横幅时 : broberg-consent[data-banner-open] ~ footer { … } 或者从剧本上读取 无 reserve-space 页面从未被触及.
它只会帮助滚动整个文档的一页. 在自己的面板内滚动的应用程序必须保留面板本身的空间(使用 data-banner-open) (中文(简体) ).
在同意前没有标记(自0.3.0起)
标出什么可能只有同意才能运行。 所有没有标记的(应用程序代码,登录,支付,会话 cookie)都和以前一样运行;没有被截获.
<script type="text/plain" data-consent="analytics" src="https://plausible.io/js/script.js"></script>
<script type="text/plain" data-consent="marketing">/* inline pixel */</script>
<iframe data-consent="marketing" data-consent-src="https://www.youtube-nocookie.com/embed/…"></iframe>
- 给定的脚本被重建并运行 一次,按文档顺序排列(添加)
data-type="module"(为模块)。 一个返回的访客的存储选择 运行在负载. - 一个iframe 得到它
src只有在授予其类别之后. consent-mode在元素发送 Google 的同意模式 v2:default=拒绝,那么update有选择。 没有属性,gtag编号 :dataLayer永远不会被触动.- 运行后撤回页面: 已经运行的跟踪器不能被取消运行 。 链接首先如此('Træk samtykke tilbage (sidindlæs)').
- 唯一能伤害网站的方法 标记它需要的脚本(登录、退出)。 只标出追踪器.
选择是每年更新的饼干(自0.3.0起)
元素将选择存储在首方饼干中 broberg-consent (Max-Age 365天,Path=/,SameSite=Lax,在https上的安全). 服务器可以读取. 作出选择本身不需要征得同意,因为这绝对是必要的。 超过12个月的选择再次提出(丹麦的惯例是至少每年延长). cookie-domain=".broberg.ai" 共享一个子域的选择. storage-key 重命名饼干.
还没有 : 一份同意记录(F014.10)和一份主机脚本,每个网站都有一个核准的文本(F014.14).
下面的无头核没有变化,仍然导出自 .。 。 。 .
这个 无头核 (原始内容存档于2018-09-21). for a GDPR conference/ cookie bladge. 旗帜 用户 实值 每个品牌拥有复制品(每个产品都有其政策文本、类别和标志), 但同意书 逻辑 何为有效同意,何时在 政策变化、基本始终、退出权——很容易实现 轻而易举地(在法律上)是错误的。 这个软件包有经过测试的正确状态机器, 无框架和无安保部门安全.
npm i @broberg/consent-cookie
使用量
import { createConsentManager } from "@broberg/consent-cookie";
const consent = createConsentManager({
policyVersion: "2026-05", // bump this when your policy changes → banner re-surfaces
storageKey: "acme-consent", // localStorage key (or pass your own `storage`)
});
if (consent.needsBanner()) showBanner(); // first visit OR policy changed
// user actions
consent.acceptAll(); // grant every category
consent.rejectAll(); // essential only
consent.setConsent({ analytics: true }); // granular; essential forced on, unlisted off
// gate side-effects
if (consent.has("analytics")) loadAnalytics();
// GDPR right to withdraw — clears consent, banner returns
consent.withdraw();
// react to changes anywhere
const off = consent.subscribe((record) => sync(record));
说对了
- 政策版再现.
needsBanner()编号 :isOutdated()当 没有记录,当存储policyVersion与现在不同, 或当遗留记录没有版本时——所以政策更新会重新向用户提供 默不作声地表示同意. - 基本是永远的. 基本类别不能切换;
has("essential")实值true甚至在任何决定之前. - 退出权.
withdraw()澄清记录——一项最严格的法律要求 手卷相会相会而忘. - SSR安全+可注射存储.
createLocalStorageConsentStorage(key)降解 当没有 DOM; 执行ConsentStorage以持续服务器侧 (将它连接到一个剖面图行) 不改变任何呼叫站点.
API 密码
createConsentManager({ policyVersion, categories?, storage?, storageKey? }): ConsentManager
// getRecord · needsBanner · isOutdated · has(category) · acceptAll · rejectAll
// setConsent(selection) · withdraw · subscribe · categories
interface ConsentStorage { get(): ConsentRecord | null; set(r): void; clear(): void }
createLocalStorageConsentStorage(key) // SSR-safe, falls back to memory
createMemoryConsentStorage()
CONSENT_CATEGORIES // default: essential · analytics · marketing (overridable)
React / Preact 横幅 + 颗粒- 切换模式( 以 shadcn Dialog / Switch 所建 ) , 由复制自有的适配器在此核心之上进行运输.
许可证
麻省理工学院的一部分 @broberg/* 共享库存.