点击按钮时Cookie未触发保存：点击Add Cookie按钮无法存储Cookie如何解决？

现有代码核心问题 #

• 事件绑定错误：当前Cookie保存逻辑绑定到了#fname输入框的点击事件上，和需求要求的「点击Add Cookie按钮触发保存」不符，只有点击输入框才会触发保存操作，点击Add Cookie按钮无任何响应
• 依赖缺失：$.cookie不属于jQuery原生方法，需要额外引入jquery.cookie插件才能调用，未引入该依赖时相关代码会直接报错，无法完成Cookie读写
• 配置缺失：未指定Cookie的生效路径、过期时间等属性，默认生成的Cookie仅在当前页面路径生效，且关闭浏览器后就会自动失效，无法满足持久化存储需求

修复后完整代码 #

<form id="myform">
  <input type="text" id="fname" value="First name"><br />
  <input type="text" id="lname" value="Last name">
</form>

<input id="btnAdd" type="button" value="Add Cookie" />
<input id="btnRead" type="button" value="Read Cookie" />

<!-- 注意引入顺序：先引入jQuery核心库，再引入jquery.cookie插件库，确保$.cookie方法可用 -->
<script type="text/javascript">
    $(function () {
        // 将保存逻辑绑定到Add Cookie按钮的点击事件
        $("#btnAdd").click(function () {
            // 配置Cookie有效期为7天，全站路径可访问
            $.cookie("Name", $("#fname").val(), { expires: 7, path: '/' });
        });
        $("#btnRead").click(function () {
            alert($.cookie("Name") ?? "未查询到存储的姓名信息");
        });
    });
</script>

验证步骤 #

修改输入框内的姓名内容后，点击「Add Cookie」按钮完成存储，再点击「Read Cookie」按钮即可看到存储的Cookie内容。如果仍有异常，可打开浏览器开发者工具的控制台查看是否有脚本报错，也可在应用存储面板查看Cookie是否成功写入。

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