javascript - 如何获取引用号(链接形式)以使用javascript在另一个html页面中自动填写表格的一部分

Question

使用本地存储和 onclick 与 javascript

我有一个包含 2 个职位描述的 html 文件:

html文件1

<li><Job Reference Number: wru01</li>
<li><Job Reference Number: wru01</li>

我需要创建一个链接(使用 javascript)，当单击每个职位描述时，它会自动填写应输入职位描述的表格(此表格位于另一个 html 页面上)

html文件2:

<legend>Job Application Information: </legend>
<label> Job Reference Number: </label>
<input id="refnumber" type="text" name="refnumber" required="required" />

所以基本上我需要它，根据单击 wru01 或 wru02 的作业编号，它会自动使用本地存储在下一页的表单中填写作业引用编号。

我已经试过了

js文件1

function onclick1() {

  var anchor = document.getElementById('link');

  anchor.addEventListener('click', function(event) {
    event.preventDefault();

    const jobCode = event.target.getAttribute('data-job');

    localStorage.setItem('job-code', jobCode);

    //need redirect user to apply page
    //console.log(event.target)
    window.location = event.target.getAttribute('href');

  })
}


function onclick2() {


  var anchor = document.getElementById('link2');


  anchor.addEventListener('click', function(event) {
    event.preventDefault();

    const jobCode = event.target.getAttribute('data-job');

    localStorage.setItem('job-code', jobCode);

    //need redirect user to apply page
    //console.log(event.target)
    window.location = event.target.getAttribute('href');

  })
}

function init() {

  document.getElementById("link").onclick = function() {
    onclick1()
  };
  document.getElementById("link2").onclick = function() {
    onclick2()
  }
  window.onload = init;
}

js文件2

function LoadJobCode() {
  var code = localStorage.getItem('job-code');

  if (code) {
    var input = document.getElementById('refnumber');
    // disable text being entered
    input.value = code;
    input.disabled = true;
  }

}

Answer 1

对不起，这不是一个好主意。我认为你可以使用 setTimeout 来解决这个问题。这是我的代码:

function onclick1() {
     var anchor = document.getElementById('link');
     anchor.addEventListener('click', function (event) {
            event.preventDefault();
            const jobCode = event.target.getAttribute('data-job');
            console.log(jobCode)
            localStorage.setItem('job-code', jobCode);
            setTimeout(() => {
                window.location.href = event.target.getAttribute('href');
            },1000)

     })
 }

我为什么要这样做？这是为了确保在进入另一个 html 页面之前保存数据(data-job)。同样，您可以使用 async/await，如下图:

function onclick1() {
        var anchor = document.getElementById('link');
        anchor.addEventListener('click', function (event) {
            event.preventDefault();
            const jobCode = event.target.getAttribute('data-job');
            console.log(jobCode)
            localStorage.setItem('job-code', jobCode);
            async function locate() {
                await new Promise(() => {
                    window.location.href = event.target.getAttribute('href');
                })
            }
            locate();
        })
    }