如何存储文本框值以供以后与 Javascript 一起使用？答案

【问题标题】：How do I store text box values for later use with Javascript?如何存储文本框值以供以后与 Javascript 一起使用？
【发布时间】：2017-02-13 21:53:09
【问题描述】：

所以我的页脚中有一个“快速注册”类型的小部件，只有名字和姓氏文本框。我还有一个按钮，点击后会重定向到实际的注册页面。我的意图是将输入到文本框中的信息带过来，并在注册表单上填写匹配的名字/姓氏文本框。

document.querySelector(".footerSignUp").onclick = function () {
var footerFirst = document.querySelector(".footerFirstName").value;
var footerLast = document.querySelector(".footerLastName").value;
alert(footerFirst,footerLast);
location.href = " http://localhost/wordpress/my-account/register/ ";
};

<input type="text" class="input-text footerFirstName" name="billing_first_name" value="Firstname" />

<input type="text" class="input-text footerLastName" name="billing_last_name" value="Lastname" />

<input type="button" value="Sign-up" class="footerSignUp" />

谢谢

【问题讨论】：

How to pass variable value between different html pages in javascript的可能重复

标签： javascript html textbox storage

【解决方案1】：

您必须将值附加为查询参数，并在重定向的 url 中包含逻辑以提取该信息并填充输入元素。

带有点击事件的页面

document.querySelector(".footerSignUp").onclick = function() {
  var footerFirst = document.querySelector(".footerFirstName").value;
  var footerLast = document.querySelector(".footerLastName").value;
  var url = getUrl(firstName, lastName);
  location.href = url;
};

function getUrl(firstName, lastName) {
    var url = 'http://localhost/wordpress/my-account/register/';
    var params = "firstName=" + firstName + "&lastName=" + lastName;

    return [url, params].join('?');
}

注册页面中的摘录

// In the registration page extract the params

function extractParams() {
   var url = location.href;
   // Extract the query params from the url
   var queryParams = url.split('?')[1];
   // Extract individual params
   var params = queryParams.split('&');

   params.forEach(function(param) {
       var data = param.split('=');
       var key = data[0];
       var value = data[1];
       var selector;

       if(key === 'firstName' && value) {
           selector = '.footerFirstName';
       } else if(key === 'lastName' && value){
           selector = '.lastFirstName';
       }

       if(selector) {
           document.querySelector(selector).value = value;
       }
   });
}

extractParams();

编辑

在第 2 页获取 url

var url = location.href;
var params = url.split('?')[1];

//And then set the new redirect
location.href = newLocation + '?' + params;

【讨论】：

您好，感谢您的回答！您的代码正在执行您的预期，我可以在 URL 中看到附加值。我只需要修改变量名，因为它们从“footerFirst”变为“firstName”，但没什么大不了的。但是，我忘了提到我在页脚注册和注册表单页面之间有一个页面。这是一个询问用户帐户是公司帐户还是个人帐户的页面。有没有办法让 url 中的值留在那里进行 1 次重定向？
它必须插入到以下 URL 'localhost/wordpress/my-account/register/…' & 'localhost/wordpress/my-account/register/…'
@SebG 很高兴有帮助:)
您必须获得location.href，然后使用? 将其拆分，并将其附加到新位置以进行第二次重定向

【解决方案2】：

您可以使用localStorage。

由于 cors/sandbox 的原因，代码 sn-ps 可能无法在此处工作。

function storeData(){
  var firstName = document.getElementById('firstName').value;
  var lastName = document.getElementById('lastName').value
  var userData = {
    'firstName': firstName,
    'lastName': lastName
  }
  localStorage.setItem('userData', JSON.stringify(userData));
}

<input type="text" id='firstName' class="input-text footerFirstName" name="billing_first_name" value="Firstname" />

<input type="text" id='lastName' class="input-text footerLastName" name="billing_last_name" value="Lastname" />

<input type="button" onclick="storeData()" value="Sign-up" class="footerSignUp" />

然后，在带有注册表单的页面上：

window.onload = function getUserData(){
  var userData = JSON.parse(localStorage.getItem('userData'));
  localStorage.clear()
  console.log(userData);
}

它将保存的用户firstName和lastName存储在userData变量中。

【讨论】：