没问题！你已经知道用document.cookie可以读取网页Cookies了，只要把这个逻辑绑定到按钮的点击事件上就能实现需求。我给你几种实用的实现方式：

方式一：内联事件（快速直接） #

这是最简单的写法，直接在按钮标签里定义点击触发的逻辑：

<button onclick="alert(document.cookie)">点击显示当前Cookies</button>

点击按钮后，就会弹出包含当前网页所有Cookies的提示框。

方式二：分离式脚本（更规范，适合扩展） #

如果后续需要添加更多逻辑，推荐把脚本和HTML结构分离，代码更易维护：

<button id="showCookiesBtn">点击显示当前Cookies</button>

<script>
// 获取按钮DOM元素
const showCookieButton = document.getElementById('showCookiesBtn');

// 给按钮绑定点击事件
showCookieButton.addEventListener('click', function() {
    // 用alert显示Cookies
    alert(document.cookie);
});
</script>

进阶：在页面内展示Cookies（避免alert弹窗限制） #

如果网页Cookies内容较多，alert可能无法完整显示，你可以把Cookies展示在页面的文本区域里：

<button id="showCookiesBtn">显示当前Cookies</button>
<!-- 用于展示Cookies的文本框 -->
<textarea id="cookiesOutput" rows="6" cols="80" readonly style="margin-top:10px;"></textarea>

<script>
const btn = document.getElementById('showCookiesBtn');
const outputArea = document.getElementById('cookiesOutput');

btn.addEventListener('click', function() {
    // 将Cookies内容写入文本框，无Cookies时提示
    outputArea.value = document.cookie || '当前网页没有设置Cookies';
});
</script>

这样用户就能清晰看到所有Cookies内容啦～

内容的提问来源于stack exchange，提问作者akash