如何在頁面刷新後保留 JavaScript 變數？

在頁面刷新之外保留 JavaScript 變數

在 JavaScript 中，可以透過按鈕點擊或其他事件動態修改變數。但是，預設情況下，這些變更會在頁面重新整理時遺失。如何確保變數在刷新頁面後仍然保留其值？

本地和會話儲存

JavaScript 中的持久儲存是透過兩種方法實現的： window.localStorage和window.sessionStorage。兩者都提供了一種儲存鍵值對的方法，但有細微的差別：

• localStorage：資料在瀏覽器會話和重新啟動之間無限期地保留。
• sessionStorage: 資料僅在目前瀏覽器工作階段中保留，並在視窗或標籤開啟後清除已關閉。

儲存資料：

要將變數儲存在持久儲存中，請使用setItem() 以及所需的鍵和值：

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

擷取資料：

之後頁面刷新，使用getItem() 擷取儲存的資料：

var someVarName = localStorage.getItem("someVarKey");

這會將儲存的值指派給someVarName ，即使在頁面刷新後也是如此。

克服限制：

本地和會話儲存僅支援字串值。要儲存更複雜的資料類型，請考慮使用JSON：

var obj = {
  prop1: "value1",
  prop2: "value2"
};

localStorage.setItem("objKey", JSON.stringify(obj));

稍後擷取並解析資料：

var obj = JSON.parse(localStorage.getItem("objKey"));

其他資源：

• 瀏覽器儲存： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• 本地儲存：https://developer.mozilla.org/en-US/docs/ DOM /儲存#localStorage

以上是如何在頁面刷新後保留 JavaScript 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！