sessionStorge和localStorage的使用-踩坑記_09

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);
}