在JavaScript 中維護HTML 頁面之間的資料完整性

在網頁之間傳輸資料時，使用查詢參數的傳統方法（例如「http:/ /localhost/ project/index.html?status=exist") 可能會在URL 中暴露敏感資訊。為了解決這個問題，開發人員尋求安全交換資料的替代方法。

一個可行的解決方案是利用 HTML5 儲存對象，例如 sessionStorage 或 localStorage。這些物件提供了一種用於在本地儲存鍵值對的強大機制，從而實現跨多個頁面的資料持久性。

會話儲存

對於單一會話中的暫存，可以利用 sessionStorage。使用sessionStorage儲存資料：

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

擷取儲存的資料：

sessionStorage.getItem('label');

本地存儲

對於更永久的存儲，可以使用 localStorage。使用 localStorage 儲存資料：

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

擷取儲存的資料：

localStorage.getItem('label');

此方法有幾個優點：

• 資料保護： URL 中不會暴露敏感資訊。
• 持久性： 即使頁面重新載入或瀏覽器關閉後，資料仍可使用。
• 跨頁面可存取性： 可以從同一域內的任何頁面存取儲存的資料.

透過利用HTML5 儲存對象，開發人員可以在HTML頁面之間有效地交換數據，同時保護數據隱私並保持應用程式連續性。