如何存储文本框值以备后用 Javascript？

Question

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

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" />

谢谢

Answer 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;

Answer 2

您可以使用 localStorage。

代码片段在这里可能不起作用，因为 cors/sandbox。

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 变量中。

如何存储文本框值以备后用 Javascript？

How do I store text box values for later use with Javascript?

javascript

html

textbox

storage