使用jQuery通过localStorage实现跨页面传值失败，求解决方案

• 表单默认提交行为拦截：90%以上的同类问题都是该原因导致，如果绑定点击事件的#undefined-652是表单的submit类型按钮，点击后会触发表单默认跳转，localStorage写入逻辑还没执行完成就跳转到页面2，导致没有值成功写入存储。需要在点击事件回调第一行加e.preventDefault()阻止默认行为，注意要给回调添加事件参数e。
• 同源规则校验：localStorage受同源策略限制，两个页面必须满足协议（http/https一致）、域名、端口三者完全相同，否则页面2无法读取页面1写入的存储值。
• 页面1取值逻辑校验：可以在写入localStorage前加打印语句确认取值是否正常，比如console.log(first_nameV, last_nameV, emailV, phoneV)，如果打印为空，说明input的name属性和代码中input[name='xxx']的匹配错误，或者对应DOM元素不存在导致取值为空。
• 页面2赋值逻辑校验：确认#first_21、#last_21、#input_22、#input_23_full这几个ID的输入框真实存在，也可以加打印语句console.log(v_first_name, v_last_name, v_email, v_phone)确认是否成功读取到存储值，排除元素ID匹配错误的问题。
• 多余逻辑移除：原有代码中写入存储前先清空存储的操作完全没必要，setItem本身就会直接覆盖旧值，多余操作反而会增大异常概率。
• 存储权限校验：确认浏览器没有禁用localStorage，也没有其他业务逻辑在存储写入后、页面2读取前清空了对应的存储项。

修复后的页面1参考代码 #

// 点击页面1的表单提交按钮后触发
$("#undefined-652").click(function (e) { 
   // 阻止表单默认提交跳转
   e.preventDefault();
   var first_nameV = $("input[name='first_name']").val();
   var last_nameV = $("input[name='last_name']").val();
   var emailV = $("input[name='email']").val();
   var phoneV = $("input[name='phone']").val();
   
   // 直接写入新值即可，会自动覆盖旧值
   localStorage.setItem("first_name_val",first_nameV);
   localStorage.setItem("last_name_val",last_nameV);
   localStorage.setItem("email_val",emailV);
   localStorage.setItem("phone_val",phoneV);

   // 确认写入完成后再手动跳转至页面2
   window.location.href = '此处替换为你的页面2地址';
}); 

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