表单提交时存储输入值到sessionStorage，clusterName为空如何解决

问题原因及解决方案 #

• 1. 存储代码触发时机错误
     你大概率是在页面初始化加载时就执行了sessionStorage.setItem那行代码，此时输入框还没有用户输入的值，自然存进去的是空值。
     你需要将存储逻辑绑定到正确的触发时机：要么绑定输入框的input/change事件，用户输入时实时更新存储值；要么绑定表单的submit事件，在表单提交执行前先完成值存储。
     示例代码：

// 方式1：输入时实时存储
$('#name').on('input', function() {
  sessionStorage.setItem("clusterName", $(this).val().toLowerCase().replace(/\s/g, "-"));
});

// 方式2：表单提交前存储
$('form').on('submit', function() {
  sessionStorage.setItem("clusterName", $('#name').val().toLowerCase().replace(/\s/g, "-"));
  return true; // 不阻断表单默认提交逻辑
});

• 2. DOM未加载完成就执行取值逻辑
     如果你的JS代码写在表单DOM的前面，执行代码时#name元素还没有渲染完成，$('#name').val()就会返回undefined，最终存储的值为空。你可以把JS代码放到页面末尾，或者包裹在DOM加载完成的回调里：

$(function() {
  // 你的存储逻辑放在这里
})

• 3. 额外优化提示：你当前用的replace(" ", "-")只会替换字符串里第一个空格，如果要替换所有空格，建议改成正则写法replace(/\s/g, "-")。

内容的提问来源于stack exchange，提问作者code-8