摘要：當頁面重新載入或者被恢復時，頁面會話也是一直存在的。自動保存一個文本域中的內(nèi)容，如果瀏覽器被意外刷新，則恢復該文本域中的內(nèi)容，所以不會丟失任何輸入的數(shù)據(jù)。該例中，我們測試數(shù)據(jù)項是否存在。

訪問原文地址

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

DOM存儲很有用，因為在瀏覽器端沒有好的方法來持久保存大量數(shù)據(jù)。瀏覽器cookie的能力有限，而且不支持組織持久數(shù)據(jù)，其他方法（如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 是個全局對象，它維護著在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開著，頁面會話周期就會一直持續(xù)。當頁面重新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標簽或者新窗口中打開一個新頁面，都會初始化一個新的會話。

自動保存一個文本域中的內(nèi)容，如果瀏覽器被意外刷新，則恢復該文本域中的內(nèi)容，所以不會丟失任何輸入的數(shù)據(jù)。

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

localStorage 屬性允許你訪問一個 local Storage 對象。localStorage 與 sessionStorage 相似。不同之處在于，存儲在 localStorage 里面的數(shù)據(jù)沒有過期時間（expiration time），而存儲在 sessionStorage 里面的數(shù)據(jù)會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。

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

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

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

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

正如上面提到的，使用 Storage.getItem() 可以從存儲中獲取一個數(shù)據(jù)項。該方法接受數(shù)據(jù)項的鍵作為參數(shù)，并返回數(shù)據(jù)值。

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() 方法可被用來創(chuàng)建新數(shù)據(jù)項和更新已存在的值。該方法接受兩個參數(shù)——要創(chuàng)建/修改的數(shù)據(jù)項的鍵，和對應的值。

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() 方法在本地存儲中設置三項數(shù)據(jù) — 背景顏色、字體和圖片路徑。然后執(zhí)行 setStyles() 方法來更新頁面的樣式。

同時，我們?yōu)槊總€表單元素綁定了一個 onchange 監(jiān)聽器，這樣，一個表單值改變時，存儲的數(shù)據(jù)和頁面樣式會更新。

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

無論何時，Storage 對象發(fā)生變化時（即創(chuàng)建/更新/刪除數(shù)據(jù)項時，重復設置相同的鍵值不會觸發(fā)該事件，Storage.clear() 方法至多觸發(fā)一次該事件），StorageEvent 事件會觸發(fā)。在同一個頁面內(nèi)發(fā)生的改變不會起作用——在相同域名下的其他頁面（如一個新標簽或 iframe）發(fā)生的改變才會起作用。在其他域名下的頁面不能訪問相同的 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;
});

這里，我們?yōu)?window 對象添加了一個事件監(jiān)聽器，在當前域名相關的 Storage 對象發(fā)生改變時該事件監(jiān)聽器會觸發(fā)。正如你在上面看到的，此事件相關的事件對象有多個屬性包含了有用的信息——改變的數(shù)據(jù)項的鍵，改變前的舊值，改變后的新值，改變的存儲對象所在的文檔的 URL，以及存儲對象本身。

Web Storage 提供了一對簡單的方法用于移除數(shù)據(jù)。我們沒用在我們的 demo 中使用這些方法，但是添加到你自己的項目中很簡單：

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

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

Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息，比如你登錄某個網(wǎng)站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實現(xiàn)的。

因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經(jīng)還使用 Cookie 來保存用戶在電商網(wǎng)站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~

而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5游戲通常會產(chǎn)生一些本地數(shù)據(jù)，localStorage 也是非常適用的。如果遇到一些內(nèi)容特別多的表單，為了優(yōu)化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導用戶填寫。這時候 sessionStorage 的作用就發(fā)揮出來了。

需要注意的是，不是什么數(shù)據(jù)都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制臺，你就隨意修改它們的值，也就是說如果你的網(wǎng)站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統(tǒng)中的敏感數(shù)據(jù)。

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", "*");