JavaScript 變數如何在頁面重新整理後保留?
即使在刷新頁面後也能保留 JavaScript 變數的值是一種常見的能力web開發中的需求。讓我們探討如何借助瀏覽器儲存機制來實現這一目標。
了解瀏覽器儲存
可以利用兩種主要的瀏覽器儲存機制:
-
window.localStorage: 在瀏覽器重新啟動後仍然存在的持久性儲存適用於整個網站。
-
window.sessionStorage:只要瀏覽器會話保持開啟狀態,暫存就會持續存在。
儲存與擷取變數
要在本機儲存中設定變數,使用:
localStorage.setItem("variableName", value);
登入後複製
在頁面儲存中設定變數的值:
var retrievedValue = localStorage.getItem("variableName");
登入後複製
sessionStorage遵循相同的模式,但一旦瀏覽器會話結束,其資料就會被清除。
額外注意事項
- 只有字串值可以直接儲存在瀏覽器儲存中。使用 JSON.stringify() 儲存更複雜的資料類型。
- 瀏覽器有大小限制。有關詳細信息,請查看瀏覽器文件。
- 建議使用自訂程式庫抽象化儲存機製或使用現有的函式庫。無論儲存類型如何,這都簡化了資料處理。
資源
- [瀏覽器儲存指南](https://developer.mozilla.org/en-US/docs/Web/ Guide/API/DOM/Storage)
- [localStorage](https://developer.mozi lla.org/en-US/docs/DOM/Storage#localStorage)
- [JSON](https://developer.mozilla.org/en-US/docs/JSON)
- [瀏覽器儲存相容性](http://caniuse.com/namevalue-storage)
以上是如何在頁面刷新後使 JavaScript 變數保持活動狀態?的詳細內容。更多資訊請關注PHP中文網其他相關文章!