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

訪問原文地址

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

DOM存儲很有用，因?yàn)樵跒g覽器端沒有好的方法來持久保存大量數(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 是個(gè)全局對象，它維護(hù)著在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開著，頁面會話周期就會一直持續(xù)。當(dāng)頁面重新載入(reload)或者被恢復(fù)(restores)時(shí)，頁面會話也是一直存在的。每在新標(biāo)簽或者新窗口中打開一個(gè)新頁面，都會初始化一個(gè)新的會話。

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

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

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

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

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

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

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

正如上面提到的，使用 Storage.getItem() 可以從存儲中獲取一個(gè)數(shù)據(jù)項(xiàng)。該方法接受數(shù)據(jù)項(xiàng)的鍵作為參數(shù)，并返回?cái)?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);
}

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

Storage.setItem() 方法可被用來創(chuàng)建新數(shù)據(jù)項(xiàng)和更新已存在的值。該方法接受兩個(gè)參數(shù)——要?jiǎng)?chuàng)建/修改的數(shù)據(jù)項(xiàng)的鍵，和對應(yīng)的值。

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

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

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

無論何時(shí)，Storage 對象發(fā)生變化時(shí)（即創(chuàng)建/更新/刪除數(shù)據(jù)項(xiàng)時(shí)，重復(fù)設(shè)置相同的鍵值不會觸發(fā)該事件，Storage.clear() 方法至多觸發(fā)一次該事件），StorageEvent 事件會觸發(fā)。在同一個(gè)頁面內(nèi)發(fā)生的改變不會起作用——在相同域名下的其他頁面（如一個(gè)新標(biāo)簽或 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 對象添加了一個(gè)事件監(jiān)聽器，在當(dāng)前域名相關(guān)的 Storage 對象發(fā)生改變時(shí)該事件監(jiān)聽器會觸發(fā)。正如你在上面看到的，此事件相關(guān)的事件對象有多個(gè)屬性包含了有用的信息——改變的數(shù)據(jù)項(xiàng)的鍵，改變前的舊值，改變后的新值，改變的存儲對象所在的文檔的 URL，以及存儲對象本身。

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

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

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

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

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

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

需要注意的是，不是什么數(shù)據(jù)都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時(shí)候，需要時(shí)刻注意是否有代碼存在 XSS 注入的風(fēng)險(xiǎn)。因?yàn)橹灰蜷_控制臺，你就隨意修改它們的值，也就是說如果你的網(wǎng)站中有 XSS 的風(fēng)險(xiǎn)，它們就能對你的 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", "*");