切換頁面時如何將輸入數據保存在輸入html框中？

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();