如何在兩個HTML頁面之間交換變量？

Question

我有兩個HTML頁面， example1.html和example2.html 。

如何使用查詢字符串將變量從example1.html傳遞到example2.html ，並在不使用任何服務器端代碼的情況下在example2.html檢索該變量？

Answer 1

在example1.html中：

<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>

或根據需要使用Javascript生成鏈接。 只要確保？varName = value以某種方式進入example2.html的末尾。

然后，在example2.html中，您使用Javascript來解析example2附帶的查詢字符串。

為此，您可以嘗試使用Querystring。

// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");

或者，parent.document.URL包含您所在頁面的完整URI。 你可以提取：

parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);

並手動解析它以將您編碼的變量拉入URI。

編輯：忘記'新Querystring（）'的'新'部分。 糟糕！

Answer 2

HTML / HTTP是無狀態的，這意味着，您在上一頁上所做/所看到的內容與當前頁面完全斷開。問題是如何在前端的兩個頁面之間傳遞變量。 （由於HTTP是無狀態的，每次加載頁面時，它都將使用您在JavaScript中設置的任何內容的初始值。您無法在JS中設置全局變量，只需在再次加載頁面后保持該值。

有幾種方法可以將值存儲在另一個地方，以便您可以使用JavaScript在加載時初始化它）

1） - 簡單地使用前端存儲，它配備任何瀏覽器（Cookie，會話存儲，本地存儲 - 出於安全原因在整個域中可用 - >這意味着您可以僅在一個域中保存此存儲上的數據，另一個域可以' t訪問此數據）並將值放在一個頁面中並在其他頁面中獲取值。 考慮到：

Cookie將數據保存到您確定的時間，

會話存儲保存數據，直到瀏覽器默認選項卡關閉。

本地存儲保存數據，直到瀏覽器完全關閉並在選項卡（頁面）之間共享數據它存儲沒有過期日期的數據，並且僅通過JavaScript清除，或清除瀏覽器緩存/本地存儲的數據 - 與cookie過期不同。

2） - 通過Ajax渲染函數生成屬性時添加屬性

<a href='example2.html?action=getAll&element=product&id=1'>a link</a>
<a href='example2.html?action=getAll&element=product&id=2'>another link</a>

- >點擊此元素后構建“URL /？ action = getAll＆element = product＆id = 1“並且在第二頁中將執行操作，您可以解析此URL並使用適當的參數調用適當的Ajax。

Answer 3

您可以使用cookie和Querystring來交換值。