Web Storage相關

訪問原文地址

概述

DOM存儲的機制是經過存儲字符串類型的鍵/值對,來提供一種安全的存取方式.這個附加功能的目標是提供一個全面的,能夠用來建立交互式應用程序的方法(包括那些高級功能,例如能夠離線工做一段時間).

DOM存儲頗有用，由於在瀏覽器端沒有好的方法來持久保存大量數據。瀏覽器cookie的能力有限，並且不支持組織持久數據，其餘方法（如flash本地存儲）須要外部插件支持。

• readonly attribute unsigned long length;

• DOMString key(in unsigned long index);

• DOMString getItem(in DOMString key);

• void setItem(in DOMString key, in DOMString data);

• void removeItem(in DOMString key);

• void clear();

sessionStorage（刷新後還在）

sessionStorage 是個全局對象，它維護着在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開着，頁面會話週期就會一直持續。當頁面從新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標籤或者新窗口中打開一個新頁面，都會初始化一個新的會話。

自動保存一個文本域中的內容，若是瀏覽器被意外刷新，則恢復該文本域中的內容，因此不會丟失任何輸入的數據。

// 獲取到咱們要循環保存的文本域
 var field = document.getElementById("field");
 
 // 查看是否有一個自動保存的值
 // (只在瀏覽器被意外刷新時)
 if ( sessionStorage.getItem("autosave")) {
    // 恢復文本域中的內容
    field.value = sessionStorage.getItem("autosave");
 }
 
 // 每隔一秒檢查文本域中的內容
 setInterval(function(){
    // 並將文本域的值保存到session storage對象中
    sessionStorage.setItem("autosave", field.value);
 }, 1000);

localStorage(一直都在)

localStorage 屬性容許你訪問一個 local Storage 對象。localStorage 與 sessionStorage 類似。不一樣之處在於，存儲在 localStorage 裏面的數據沒有過時時間（expiration time），而存儲在 sessionStorage 裏面的數據會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。

當瀏覽器進入私人模式(private browsing mode，Google Chrome 上對應的應該是叫隱身模式)的時候，會建立一個新的、臨時的、空的數據庫，用以存儲本地數據(local storage data)。當瀏覽器關閉時，裏面的全部數據都將被丟棄。

測試本地存儲是否已被填充

if(!localStorage.getItem('bgcolor')) {
  populateStorage();
} else {
  setStyles();
}

Storage.getItem() 方法用來從存儲中獲取一個數據項。該例中，咱們測試 bgcolor 數據項是否存在。若是不存在，執行 populateStorage() 來將存在的自定義值添加到存儲中。若是有值存在，則執行 setStyles() 來使用存儲的值更新頁面的樣式。

備註：你還可使用 Storage.length 來測試存儲對象是否爲空。

從存儲中獲取值

正如上面提到的，使用 Storage.getItem() 能夠從存儲中獲取一個數據項。該方法接受數據項的鍵做爲參數，並返回數據值。

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

首先，前三行代碼從本地中獲取值。接着，將值顯示到表單元素中，這樣在從新加載頁面時與自定義設置保持同步。最後，更新頁面的樣式和圖片，這樣從新加載頁面後，你的自定義設置從新起做用了。

在存儲中設置值

Storage.setItem() 方法可被用來建立新數據項和更新已存在的值。該方法接受兩個參數——要建立/修改的數據項的鍵，和對應的值。

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);

  setStyles();
}

populateStorage() 方法在本地存儲中設置三項數據 — 背景顏色、字體和圖片路徑。而後執行 setStyles() 方法來更新頁面的樣式。

同時，咱們爲每一個表單元素綁定了一個 onchange 監聽器，這樣，一個表單值改變時，存儲的數據和頁面樣式會更新。

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

經過 StorageEvent 響應存儲的變化

不管什麼時候，Storage 對象發生變化時（即建立/更新/刪除數據項時，重複設置相同的鍵值不會觸發該事件，Storage.clear() 方法至多觸發一次該事件），StorageEvent 事件會觸發。在同一個頁面內發生的改變不會起做用——在相同域名下的其餘頁面（如一個新標籤或 iframe）發生的改變纔會起做用。在其餘域名下的頁面不能訪問相同的 Storage 對象。

window.addEventListener('storage', function(e) {  
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = e.storageArea;
});

這裏，咱們爲 window 對象添加了一個事件監聽器，在當前域名相關的 Storage 對象發生改變時該事件監聽器會觸發。正如你在上面看到的，此事件相關的事件對象有多個屬性包含了有用的信息——改變的數據項的鍵，改變前的舊值，改變後的新值，改變的存儲對象所在的文檔的 URL，以及存儲對象自己。

刪除數據記錄

Web Storage 提供了一對簡單的方法用於移除數據。咱們沒用在咱們的 demo 中使用這些方法，可是添加到你本身的項目中很簡單：

//接受一個參數——你想要移除的數據項的鍵，而後會將對應的數據項從域名對應的存儲對象中移除。
Storage.removeItem() 

//不接受參數，只是簡單地清空域名對應的整個存儲對象。
Storage.clear()

Cookie 和 localStorage 有啥差異

Cookie

Cookie 是小甜餅的意思。顧名思義，cookie 確實很是小，它的大小限制爲4KB左右，是網景公司的前僱員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登陸信息，好比你登陸某個網站市場能夠看到「記住密碼」，這一般就是經過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

三者比較

特性	Cookie	localStorage	sessionStorage
數據的生命期	通常由服務器生成，可設置失效時間。若是在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效	除非被清除，不然永久保存	僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小	4K左右	通常爲5MB
與服務器端通訊	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
易用性	須要程序員本身封裝，源生的Cookie接口不友好	源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持

應用場景

由於考慮到每一個 HTTP 請求都會帶着 Cookie 的信息，因此 Cookie 固然是能精簡就精簡啦，比較經常使用的一個應用場景就是判斷用戶是否登陸。針對登陸過的用戶，服務器端會在他登陸時往 Cookie 中插入一段加密過的惟一辨識單一用戶的辨識碼，下次只要讀取這個值就能夠判斷當前用戶是否登陸啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，現在有了 localStorage，彷佛在這個方面也能夠給 Cookie 放個假了~

而另外一方面 localStorage 接替了 Cookie 管理購物車的工做，同時也能勝任其餘一些工做。好比HTML5遊戲一般會產生一些本地數據，localStorage 也是很是適用的。若是遇到一些內容特別多的表單，爲了優化用戶體驗，咱們可能要把表單頁面拆分紅多個子頁面，而後按步驟引導用戶填寫。這時候 sessionStorage 的做用就發揮出來了。

安全性的考慮

須要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，須要時刻注意是否有代碼存在 XSS 注入的風險。由於只要打開控制檯，你就隨意修改它們的值，也就是說若是你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄爲。因此千萬不要用它們存儲你係統中的敏感數據。

瀏覽器中不一樣Tab頁之間的通訊

• Use Cookie

• LocalStorage

• 經過window.open(...)方式打開的tab，能夠操做Windows對象來通訊

• postMessage API

//In w1
var w2 = window.open("abc.do");
window.addEventListener("message", function(event){
    console.log(event.data);
});

//In w2(abc.do)
window.opener.postMessage("Hi! I'm w2", "*");