如何讓一個 JS 函數打開一個新的 HTML 頁面然后運行？

Question

在我正在構建的多頁面應用程序（編碼學生項目）中，我有一個要求，即點擊一個 HTML 頁面應該：

• 從那個點擊中獲取輸入，打開一個不同的 HTML 頁面，
• 使用點擊輸入信息（來自上一頁）作為函數參數，
• 運行該函數並在當前頁面上顯示結果。

我嘗試在“第一個”頁面上使用 onclick 來運行該功能，然后將

 window.open("new_page")

進入函數本身，但這不起作用 - window.open 方法確實打開了新頁面，但它似乎“刪除”了所有函數結果，無論我是將 window.open 放在函數的頂部還是底部定義。

在 JS 中執行此操作的正確方法是什么？

Answer 1

如果您的網站實現完全是客戶端（沒有任何服務器端腳本，例如 PHP），這里有兩種可能的方法：

1-使用本地存儲：

基本上， localStorage允許您的 Web 應用程序在您的瀏覽器中存儲屬性（作為鍵值對），您可以在整個網站中訪問這些屬性。 更多信息。

//in the first page, you can set a property
localStorage.setItem("key", value);

//then from the second page you can access it like so:
var val = localStorage.getItem("key");

2- 將查詢字符串參數添加到您要重定向到的 URL：

您可以通過簡單地將查詢字符串附加到您的 URL 來將 GET 請求參數添加到您的重定向中，因此要傳遞一個名為“key”且值為“value”的參數，您可以執行以下操作：

window.open("new_page?key=value") //the URL will now look like this

然后從第二頁，您可以像這樣檢索值：

var urlParams = new URLSearchParams(window.location.search);
var val = urlParams.get('key');