Question

我有一个用于搜索栏的html输入类型，当前我将输入保存到sessionStorage中，以便在单击搜索按钮后可以将其加载到下一页（以便搜索框将包含前一个查询）。问题在于，当您在浏览器中单击“后退”按钮时，它不会加载上一个查询，而是在加载最新的查询。

我知道为什么这行不通，但是我不知道如何实现它，因此输入框会显示适当的搜索查询。有什么想法吗？

示例：

在主屏幕上，我搜索“ Query1”，然后将我带到结果页面。现在，页面顶部的搜索栏将自动填充其中的“ Query1”。我再次向上搜索，这次是“ Query2”。下一个结果页面显示“ Query2”，填入搜索栏。我在浏览器中按了退格键，这就是问题所在。当我希望它显示“ Query1”时，它仍然显示“ Query2”。

Answer 1

您可以尝试将查询作为参数arg传递到结果页。然后连接输入框以检查并使用该参数（如果存在）。

我相信它看起来像https://stackblitz.com/edit/typescript-bbz1t4

一些简单的HTML

<form id="myform" onsubmit="submit()">
  <input id="query" />
  <button type="submit">
  submit
  </button>
</form>

和JS将值随机移入和移出URL参数

const urlParams = new URLSearchParams(window.location.search);

function init() {
  //Set value of input
    document.getElementById('query').value = urlParams.get('q');
}

document.onsubmit = function() {
  //May or maynot be necessary
  event.preventDefault();

  document.getElementById('myform').action += "q=" + document.getElementById('query').value;
  document.location = document.getElementById('myform').action;
}

init();

切换页面时如何将输入数据保存在输入html框中？

1 个答案: