Как сохранить значения текстового поля для последующего использования с помощью Javascript?

Question

Итак, у меня есть виджет «быстрого регистра» в нижнем колонтитуле с только текстовыми полями первого и последнего имени. У меня также есть кнопка, которая перенаправляется на фактическую страницу регистрации после нажатия. Мои намерения состоят в том, чтобы переносить информацию, введенную в текстовые поля, и заполнять соответствующие поля ввода/последнего имени в регистрационной форме.

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('?'); 
} 

Extract в странице регистрации

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

Отрывки кода могут не работать здесь, из-за корса/песочницы.

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.