将表单存储在本地存储中，稍后检索它以提交

Question

在 wordpress 网站中，我希望当有人填写产品表单（选择属性等）并单击立即购买时，如果未登录，则将他重定向到登录表单。成功登录后，我想从localstorage获取提交的表单内容，填写表单，然后自动提交表单。

这可能吗？

我发现我可以像这样存储提交的表单（但是如何自动重新填写表单？）：

$(document).ready(function()    {  
    $('form').submit(function(e) {    
        e.preventDefault();
        var formFields = $(this).serialize();
        localStorage.setItem('myForm', formFields);    
        //data = localStorage.getItem('myForm');  //retrieve it later
     });
});

Answer 1

您应该能够从 localStorage 检索数据，使用 DOM 选择器获取表单字段并使用 localStorage 中的数据填充它们的值。

在 vanilla JS 中，您可能可以执行以下操作：

document.addEventListener('load', () => {
  // check if user is logged in according to your usecase
  if(isLoggedIn()) {
    try {
      const formData = JSON.parse(localStorage.getItem('myForm'));
      // get input fields. If you have some unique id associated to them, you can use document.querySelector(`#${inputId}`);
      const inputFields = document.querySelectorAll('input');
      for(let i = 0; i<inputFields.length; i++) {
         const inputId = inputFields[i].getAttribute('data-id');
         // fallback to empty string in case it is not found in localStorage object
         inputFields[i].value = formData[inputId] || '';
      }
    } catch(e) {
      // handle error
    }

    // Now you have the form input fields pre-filled, add custom logic from here .. 
  }

})

/* 
  --- Sample DOM ----
  <input data-id="name" />
  <input data-id="city" />


  ---- Form fields saved in localStorage ---
  { name : 'Naruto', city: 'Leaf Village' }
*/