在html頁面之間共享數據

Question

我想將一些數據從一個HTML頁面發送到另一HTML頁面。 我通過類似http://localhost/project/index.html?status=exist的查詢參數發送數據。 這種方法的問題在於數據保留在URL中。 是否有其他方法可以使用JavaScript或jquery在HTML頁面之間發送數據。

Answer 1

為什么不將值存儲在諸如sessionStorage或localStorage類的HTML5存儲對象中，請訪問HTML5存儲文檔以獲取更多詳細信息。 使用此功能，您可以在本地臨時/永久存儲中間值，然后在以后訪問您的值。

要存儲會話的值：

sessionStorage.getItem('label')
sessionStorage.setItem('label', 'value')

或更永久地：

localStorage.getItem('label')
localStorage.setItem('label', 'value')

因此，您可以使用HTML5存儲對象（臨時）在多個頁面之間存儲表單數據，甚至可以在重新加載后保留這些數據。

Answer 2

我知道這是一篇舊文章，但想想我會分享我的兩分錢。 @Neji是正確的，因為您可以使用sessionStorage.getItem('label')和sessionStorage.setItem('label', 'value') （盡管他的setItem參數是向后的，沒什么大不了的）。 我更喜歡以下內容，我認為它更簡潔：

var val = sessionStorage.myValue

代替getItem和

sessionStorage.myValue = 'value'

代替setItem 。

另外，應該注意的是，為了存儲JavaScript對象，必須對它們進行字符串化以進行設置，並進行解析以獲取它們，如下所示：

sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object

原因是sessionStorage將所有內容存儲為字符串，因此，如果您只說sessionStorage.object = myObject您得到的只是[object Object]，這對您沒有太大幫助。

Answer 3

可能如果您只想傳輸供JavaScript使用的數據，則可以使用像這樣的哈希標簽

http://localhost/project/index.html#exist

因此，一旦完成檢索數據，則顯示消息，並將window.location.hash更改為合適的值。現在，每當刷新頁面時，將不會顯示井號hashtag
注意：當您將使用此查詢字符串代替ot查詢字符串時，服務器無法檢索/讀取正在發送的數據

Answer 4

好吧，您實際上可以通過JavaScript發送數據-但您應該知道這是網頁中的＃1漏洞利用源，因為它是XSS :)

我個人建議改用HTML公式，並在服務器端修改javascript數據。

但是，如果要在兩個頁面之間共享（我想它們不在本地主機上都共享，因為在兩個后端驅動的兩個頁面之間共享沒有意義），則需要指定CORS標頭，以允許瀏覽器將數據發送到列入白名單的域。

這兩個鏈接可能會對您有所幫助，它通過Node后端顯示了示例，但您可以理解它的工作原理：

鏈接1

而且，當然，CORS規范：

連結2

〜干杯