使用sessionStorage保存表单值时遇$未定义错误求助

问题背景 #

你尝试通过脚本在页面刷新时保存账单表单信息，解决跳转PayPal时的数据丢失问题，但遇到了Uncaught TypeError: $ is not a function错误，且目前脚本仅处理了部分表单字段。

第一步：修复$ is not a function错误 #

这个错误的核心原因是jQuery未正确加载或未在你的脚本前加载，或者存在其他JS库与jQuery的$变量冲突。可以通过以下两种方式解决：

1. 确认jQuery加载顺序

确保你引入jQuery的<script>标签在自定义脚本之前，这样当你的代码运行时，$已经被jQuery定义：

<!-- 先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 再加载你的自定义脚本 -->
<script>
// 你的存储逻辑代码
</script>

2. 解决库冲突（如果存在）

如果页面中还有其他JavaScript库（比如Prototype）也使用$，可以将你的代码包裹在jQuery的立即执行函数中，强制$指向jQuery：

(function($) {
    // 这里面的$完全指向jQuery，不会和其他库冲突
    // 你的存储逻辑代码写在这里
})(jQuery);

第二步：完善账单字段的存储与恢复 #

你当前的脚本仅处理了3个字段，下面是优化后的完整脚本，包含所有账单表单字段，且代码更简洁易维护：

(function($) {
    // 定义所有需要存储的账单字段ID
    const billingFieldIds = [
        'billing_firstname', 'billing_lastname', 'billing_company',
        'billing_state', 'billing_country', 'billing_address',
        'billing_address2', 'billing_city', 'billing_zip', 'billing_phone'
    ];

    // 页面加载时恢复存储的表单数据
    window.onload = function() {
        billingFieldIds.forEach(fieldId => {
            const storedValue = sessionStorage.getItem(fieldId);
            // 跳过默认占位符（比如字段名本身）和空值
            if (storedValue && storedValue !== fieldId) {
                $(`#${fieldId}`).val(storedValue);
            }
        });
    };

    // 页面刷新/关闭前保存表单数据到sessionStorage
    window.onbeforeunload = function() {
        billingFieldIds.forEach(fieldId => {
            const fieldValue = $(`#${fieldId}`).val();
            sessionStorage.setItem(fieldId, fieldValue);
        });
    };
})(jQuery);

额外注意事项 #

• sessionStorage特性：sessionStorage仅在当前浏览器会话中有效，关闭标签页后数据会被清除。如果需要持久化保存（跨会话），可以替换为localStorage，但要注意用户隐私数据的安全性。
• 下拉框兼容性：脚本中使用val()设置下拉框（如billing_state、billing_country）的选中值是正确的，jQuery会自动匹配对应的option值。
• 默认值判断：脚本中跳过了与字段ID相同的存储值，避免恢复页面默认的占位符内容。

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