如何在 jQuery 中正确获取并使用自定义属性值设置 Cookie

苏承栈

2026-09-22 • 👁 0人浏览过

本文讲解如何通过 jquery 安全、准确地读取按钮的 `data-accent- switch er` 属性值，并将其写入浏览器 cookie ，解决因属性命名不规范和方法误用（如混用 `.val()` 与 `.attr()`）导致的值获取错误问题。在前端开发中，常需通过按钮点击动态切换主题、配色等用户偏好设置，并持久化保存至 Cookie。但若自定义属性命名或 jQuery API 使用不当，极易引发值读取异常（例如返回 undefined、[object Object] 或意外覆盖）。原代码存在两个关键问题：属性命名不符合 HTML5 规范：accent-switcher 是非法的自定义属性名（含连字符且未加 data- 前缀），jQuery 的 .data() 方法无法自动识别；应改为 data-accent-switcher； API 混用错误：$(this).val($(this).attr("accent-switcher")) 试图将 attr() 返回值作为参数传给 val() —— 这实际是在设置元素的 value 值，而非获取属性值，且

⚠️ 注意事项：若必须使用非 data- 前缀属性（如遗留系统限制），请改用 .attr('accent-switcher')，但需确保属性名在 HTML 中拼写完全一致（区分大小写），且避免与原生属性冲突； .data() 会缓存首次读取结果，后续修改 DOM 属性不会自动同步；如需实时读取，强制用 .attr()； ips.utils.cookie.set(key, value, secure) 中第三个参数为布尔值，表示是否仅限 HTTPS 传输，请根据部署环境合理设置；推荐使用事件委托（$(document).on('click', selector, handler)）替代 .each().click()，既避免重复绑定，也支持未来动态插入的按钮。通过规范属性命名与精准调用 jQuery 数据 API，即可稳定、可维护地实现用户偏好持久化。

相关文章