在WYSIWYG Web Builder 19中跨页面传递JS变量问题求助

一、当前实现代码 #

1. index页面的存储函数（head标签内） #

<script type="text/javascript">

function storeGlobals() {

localstorage.setItem("name", name.value)
localstorage.setItem("current_age", current_age.value)
localstorage.setItem("retirement_age", retirement_age.value)
localstorage.setItem("base_salary", base_salary.value)
localstorage.setItem("emailid", emailid.value)

localstorage.setItem("FEGLI_BASIC_LIFETIME_COST", "$"+total_FEGLI_BASIC_LIFETIME_COST)
localstorage.setItem("fegli_opa_cost", "$"+total_fegli_opa_cost)
localstorage.setItem("UB_PERMANENT_LIFETIME_COST", "$"+total_UB_PERMANENT_LIFETIME_COST)
localstorage.setItem("fegli_opb_cost", "$"+total_fegli_opb_cost)
localstorage.setItem("UB_TERM_COST", "$"+total_UB_TERM_COST)
localstorage.setItem("Estimated_Total_FEGLI_Lifetime_Cost", "$"+total_Estimated_Total_FEGLI_Lifetime_Cost)

localstorage.setItem("total_savings", "$"+total_savings_final)
localstorage.setItem("regular_finalresult", "$"+regular_total_savings_final)
localstorage.setItem("regular_fegli_basic_coverage", "$"+FEGLI_BASIC_COVERAGE_AMT_report_final)
localstorage.setItem("regular_fegli_opa", "$"+FEGLI_OPA_AMT_report_final)
localstorage.setItem("regular_fegli_opb", "$"+"$"+FEGLI_OPB_AMT_report_final)

}
</script>

2. results.php页面的读取函数（head标签内，通过onload调用） #

<script type="text/javascript">

function readGlobals() {

localstorage.getItem("name")
localstorage.getItem("current_age")
localstorage.getItem("retirement_age")
localstorage.getItem("base_salary")
localstorage.getItem("emailid")

localstorage.getItem("FEGLI_BASIC_LIFETIME_COST")
localstorage.getItem("fegli_opa_cost")
localstorage.getItem("UB_PERMANENT_LIFETIME_COST")
localstorage.getItem("fegli_opb_cost")
localstorage.getItem("UB_TERM_COST")
localstorage.getItem("Estimated_Total_FEGLI_Lifetime_Cost")

localstorage.getItem("total_savings")
localstorage.getItem("regular_finalresult")
localstorage.getItem("regular_fegli_basic_coverage")
localstorage.getItem("regular_fegli_opa")
localstorage.getItem("regular_fegli_opb")

}
</script>

3. 单个变量测试代码（仍失败） #

<script type="text/javascript">

function readGlobals() {

if document.getElementById("age").value = "13" {
document.getElementById("age").value = "55 through 59";
}

const total_savings = localStorage.getItem("total_savings");
document.getElementById("total_savings").value = total_savings;

}
</script>

二、问题排查与修复方案 #

1. 核心语法错误 #

• localStorage大小写错误：JS是大小写敏感语言，所有localstorage必须改为localStorage。
• 测试代码if语法错误：缺少括号且用了赋值号=，正确写法：

  if (document.getElementById("age").value === "13") {
      document.getElementById("age").value = "55 through 59";
  }
  

• 读取函数未绑定页面元素：原readGlobals仅调用getItem，未将值赋值到页面DOM元素，需补充元素赋值逻辑。

2. 完整修复后的代码示例 #

存储函数（index页面）

<script type="text/javascript">
function storeGlobals() {
    // 表单输入项存储（明确获取DOM元素）
    localStorage.setItem("name", document.getElementById("name").value);
    localStorage.setItem("current_age", document.getElementById("current_age").value);
    localStorage.setItem("retirement_age", document.getElementById("retirement_age").value);
    localStorage.setItem("base_salary", document.getElementById("base_salary").value);
    localStorage.setItem("emailid", document.getElementById("emailid").value);

    // 计算结果存储（移除重复$符号）
    localStorage.setItem("FEGLI_BASIC_LIFETIME_COST", "$" + total_FEGLI_BASIC_LIFETIME_COST);
    localStorage.setItem("fegli_opa_cost", "$" + total_fegli_opa_cost);
    localStorage.setItem("UB_PERMANENT_LIFETIME_COST", "$" + total_UB_PERMANENT_LIFETIME_COST);
    localStorage.setItem("fegli_opb_cost", "$" + total_fegli_opb_cost);
    localStorage.setItem("UB_TERM_COST", "$" + total_UB_TERM_COST);
    localStorage.setItem("Estimated_Total_FEGLI_Lifetime_Cost", "$" + total_Estimated_Total_FEGLI_Lifetime_Cost);

    localStorage.setItem("total_savings", "$" + total_savings_final);
    localStorage.setItem("regular_finalresult", "$" + regular_total_savings_final);
    localStorage.setItem("regular_fegli_basic_coverage", "$" + FEGLI_BASIC_COVERAGE_AMT_report_final);
    localStorage.setItem("regular_fegli_opa", "$" + FEGLI_OPA_AMT_report_final);
    localStorage.setItem("regular_fegli_opb", "$" + FEGLI_OPB_AMT_report_final);
}
</script>

读取函数（results.php页面）

<script type="text/javascript">
function readGlobals() {
    // 根据元素类型选择textContent或value，添加默认值避免显示null
    document.getElementById("name").textContent = localStorage.getItem("name") || "";
    document.getElementById("current_age").textContent = localStorage.getItem("current_age") || "";
    document.getElementById("retirement_age").textContent = localStorage.getItem("retirement_age") || "";
    document.getElementById("base_salary").textContent = localStorage.getItem("base_salary") || "";
    document.getElementById("emailid").textContent = localStorage.getItem("emailid") || "";

    document.getElementById("FEGLI_BASIC_LIFETIME_COST").textContent = localStorage.getItem("FEGLI_BASIC_LIFETIME_COST") || "";
    document.getElementById("fegli_opa_cost").textContent = localStorage.getItem("fegli_opa_cost") || "";
    document.getElementById("UB_PERMANENT_LIFETIME_COST").textContent = localStorage.getItem("UB_PERMANENT_LIFETIME_COST") || "";
    document.getElementById("fegli_opb_cost").textContent = localStorage.getItem("fegli_opb_cost") || "";
    document.getElementById("UB_TERM_COST").textContent = localStorage.getItem("UB_TERM_COST") || "";
    document.getElementById("Estimated_Total_FEGLI_Lifetime_Cost").textContent = localStorage.getItem("Estimated_Total_FEGLI_Lifetime_Cost") || "";

    document.getElementById("total_savings").value = localStorage.getItem("total_savings") || "";
    document.getElementById("regular_finalresult").textContent = localStorage.getItem("regular_finalresult") || "";
    document.getElementById("regular_fegli_basic_coverage").textContent = localStorage.getItem("regular_fegli_basic_coverage") || "";
    document.getElementById("regular_fegli_opa").textContent = localStorage.getItem("regular_fegli_opa") || "";
    document.getElementById("regular_fegli_opb").textContent = localStorage.getItem("regular_fegli_opb") || "";
}
// 确保页面加载完成后执行读取
window.onload = readGlobals;
</script>

三、WYSIWYG Web Builder中的实现步骤 #

1. index页面配置

   • 打开项目，选中index页面，点击Page -> HTML -> HTML Head，粘贴修复后的存储函数代码。
   • 找到提交按钮，在属性面板的Events中添加onclick事件，选择Run JavaScript，输入storeGlobals(); window.location.href='results.php';（完成存储后跳转结果页）。

2. results.php页面配置

   • 同样打开HTML Head，粘贴修复后的读取函数代码。
   • 在页面中添加对应id的元素（标签、输入框等），确保元素id与代码中getElementById的参数完全一致。

3. 测试验证

   • 预览index页面，输入数据后点击提交，跳转到results.php检查数据是否正常显示。

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