資訊專欄INFORMATION COLUMN
摘要：的使用屬性允許你訪問一個對象。它與相似，不同之處在于里面存儲的數據沒有過期時間設置，而存儲在里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。
sessionStorge的使用
sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 localStorage 里面存儲的數據沒有過期時間設置，而存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。在新標簽或窗口打開一個頁面時會在頂級瀏覽上下文中初始化一個新的會話，這點和 session cookies 的運行方式不同
語法// 保存數據到sessionStorage
sessionStorage.setItem("key", "value");
// 從sessionStorage獲取數據
var data = sessionStorage.getItem("key");
// 從sessionStorage刪除保存的數據
sessionStorage.removeItem("key");
// 從sessionStorage刪除所有保存的數據
sessionStorage.clear();
例子
// 獲取文本輸入框
var field = document.getElementById("field");
// 檢測是否存在 autosave 鍵值
// (這個會在頁面偶然被刷新的情況下存在)
if (sessionStorage.getItem("autosave")) {
// 恢復文本輸入框的內容
field.value = sessionStorage.getItem("autosave");
}
// 監聽文本輸入框的 change 事件
field.addEventListener("change", function() {
// 保存結果到 sessionStorage 對象中
sessionStorage.setItem("autosave", field.value);
});
localStorage的使用
只讀的localStorage 允許你訪問一個Document 的遠端（origin）對象 Storage；數據存儲為跨瀏覽器會話。 localStorage 類似于sessionStorage。區別在于，數據存儲在 localStorage 是無期限的，而當頁面會話結束——也就是說當頁面被關閉時,數據存儲在sessionStorage 會被清除
語法//設定
localStorage.setItem("myCat", "Tom")
//讀取
let cat = localStorage.getItem("myCat");
//移除
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();
例子
function setStyles() {
var currentColor = localStorage.getItem("bgcolor");
var currentFont = localStorage.getItem("font");
var currentImage = localStorage.getItem("image");
document.getElementById("bgcolor").value = currentColor;
document.getElementById("font").value = currentFont;
document.getElementById("image").value = currentImage;
htmlElem.style.backgroundColor = "#" + currentColor;
pElem.style.fontFamily = currentFont;
imgElem.setAttribute("src", currentImage);
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53344.html
摘要：的使用屬性允許你訪問一個對象。它與相似，不同之處在于里面存儲的數據沒有過期時間設置，而存儲在里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。 sessionStorge的使用 sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 lo...
閱讀 2472·2021-10-12 10:11
閱讀 1218·2021-10-11 10:58
閱讀 3258·2019-08-30 15:54
閱讀 696·2019-08-30 13:59
閱讀 667·2019-08-29 13:07
閱讀 1392·2019-08-26 11:55
閱讀 2133·2019-08-26 10:44
閱讀 2620·2019-08-23 18:25
