# @broberg/consent-cookie 中文文档 规范地址：https://npmcn.com/package/%40broberg/consent-cookie/ 版本：0\.7\.1 npm 元数据更新时间：2026-10-14T21:17:30.374Z 中文译文更新时间：2026-11-08T16:15:53.496Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40broberg/consent-cookie 原文对照：https://npmcn.com/package/%40broberg/consent-cookie/?lang=original 项目主页：https://github.com/broberg-ai/components#readme 源码仓库：https://github.com/broberg-ai/components ## 关键信息（来自 npm 元数据） - 包体积（解压后）：234 kB，16 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2026-07-11T17:00:14.143Z - 最新版本发布：2026-10-14T21:17:29.863Z - 近 30 天下载量：2781（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：12（近 12 个月 12 个） ## 中文简介 任何网站的 GDPR cookie 同意: , 一个自定义的滴入元素( banner, 设置面板, 重开控件), 在 Next, Vite+ 中同样有效 Preact and plain HTML and take the site's @broberg/ tom series, 在无框架同意的同名词之上 ## 安装 ```sh npm install @broberg/consent-cookie ``` 也可以使用：`pnpm add @broberg/consent-cookie`、`yarn add @broberg/consent-cookie`、`bun add @broberg/consent-cookie` ## README # @broberg/同意-饼干 ## 滴入横幅 : `` (自0.2.0起) 一个元素在下一个, Vite+ 中工作相同 Preact and plain HTML. (英语). 没有网站复制它自己的旗帜. ```html Cookie-indstillinger ``` | 属性 | 含义 | | --- | --- | | `policy-version` | **要求.** 等饼干政策变了再跳 旗子上写着“Vores cookie-potik er opdateret”. | | `privacy-href` | "Læs just"的链接. | | `lang` | `da` (违约)或 `en`后退至 ``。 。 。 . | | `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起):** ```html ``` - **读取同意 :** `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` 当旗帜被打开的时候, `` 获得一个与横幅高度相等的底板并加其与底板相去相去( )`--broberg-consent-banner-bottom`),在调整大小时保持当前状态。 在选择中,它再次被去除,任何内线 `padding-bottom` 您的网站有 `` 被放回原处. ```html ``` 你想自己来吗? 元素总是携带 `data-banner-open` 在显示横幅时 : `broberg-consent[data-banner-open] ~ footer { … }` 或者从剧本上读取 无 `reserve-space` 页面从未被触及. **它只会帮助滚动整个文档的一页.** 在自己的面板内滚动的应用程序必须保留面板本身的空间(使用 `data-banner-open`) (中文(简体) ). ## 在同意前没有标记(自0.3.0起) 标出什么可能只有同意才能运行。 所有没有标记的(应用程序代码,登录,支付,会话 cookie)都和以前一样运行;没有被截获. ```html ``` - 给定的脚本被重建并运行 **一次**,按文档顺序排列(添加) `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. 旗帜 _用户_ 实值 每个品牌拥有复制品(每个产品都有其政策文本、类别和标志), 但同意书 _逻辑_ 何为有效同意,何时在 政策变化、基本始终、退出权——很容易实现 轻而易举地(在法律上)是错误的。 这个软件包有经过测试的正确状态机器, 无框架和无安保部门安全. ```bash npm i @broberg/consent-cookie ``` ## 使用量 ```ts 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 密码 ```ts 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/*`](https://discovery.broberg.ai/) 共享库存. ## 常见问题 ### @broberg/consent-cookie 是什么？ 任何网站的 GDPR cookie 同意: , 一个自定义的滴入元素\( banner, 设置面板, 重开控件\), 在 Next, Vite\+ 中同样有效 Preact and plain HTML and take the site's @broberg/ tom series, 在无框架同意的同名词之上 ### 如何安装 @broberg/consent-cookie？ 在项目目录运行 npm install @broberg/consent-cookie，或使用 pnpm add / yarn add / bun add。 ### @broberg/consent-cookie 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @broberg/consent-cookie 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @broberg/consent-cookie 可以商用吗？ @broberg/consent-cookie 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @broberg/consent-cookie 的下载量有多少？ 根据 npm 官方下载统计，@broberg/consent-cookie 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,781 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @broberg/consent-cookie 还在维护吗？ 最新版本 0\.7\.1 发布于 2026/10/15（24 天前）；至今共发布 12 个版本，其中过去 12 个月发布了 12 个；首次发布于 2026/07/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。