一、什么是本地存儲(chǔ)？

通過(guò)本地存儲(chǔ)（Local Storage），web 應(yīng)用程序能夠在用戶(hù)瀏覽器中對(duì)數(shù)據(jù)進(jìn)行本地的存儲(chǔ)。

在 HTML5 之前，應(yīng)用程序數(shù)據(jù)只能存儲(chǔ)在 cookie 中，包括每個(gè)服務(wù)器請(qǐng)求。本地存儲(chǔ)則更安全，并且可在不影響網(wǎng)站性能的前提下將大量數(shù)據(jù)存儲(chǔ)于本地。

與 cookie 不同，存儲(chǔ)限制要大得多（至少5MB），并且信息不會(huì)被傳輸?shù)椒?wù)器。

本地存儲(chǔ)經(jīng)由起源地（origin）（經(jīng)由域和協(xié)議）。所有頁(yè)面，從起源地，能夠存儲(chǔ)和訪(fǎng)問(wèn)相同的數(shù)據(jù)。

二、瀏覽器支持

表格中的數(shù)組指示了完全支持本地存儲(chǔ)的首個(gè)瀏覽器版本。

API	Chrome	IE	FireFox	Safari	Opera
Web Storage	4.0	8.0	3.5	4.0	11.5

三、HTML 本地存儲(chǔ)對(duì)象

HTML 本地存儲(chǔ)提供了兩個(gè)在客戶(hù)端存儲(chǔ)數(shù)據(jù)的對(duì)象：

• window.localStorage - 存儲(chǔ)沒(méi)有截止日期的數(shù)據(jù)
• window.sessionStorage - 針對(duì)一個(gè) session 來(lái)存儲(chǔ)數(shù)據(jù)（）
  在使用本地存儲(chǔ)時(shí)，請(qǐng)檢測(cè)localStorage和sessionStorage的瀏覽器支持：

if (typeof(Storage) !== "undefined") {
    // 針對(duì) localStorage/sessionStorage 的代碼
} else {
    // 抱歉！不支持 Web Storage ..
}

localStorage 對(duì)象

localStorage 對(duì)象存儲(chǔ)的是沒(méi)有截止日期的數(shù)據(jù)。當(dāng)瀏覽器被關(guān)閉時(shí)數(shù)據(jù)不會(huì)被刪除，在下一天、周或年中，都是可用的。
存儲(chǔ)、取回和刪除

// 存儲(chǔ)  下面兩種方式相等
localStorage.setItem("lastname", "Gates");
localStorage.lastname = "Gates"

// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
//刪除
localStorage.removeItem("lastname");

實(shí)例解釋?zhuān)?br> 創(chuàng)建 localStorage 名稱(chēng)/值對(duì)，其中：name="lastname"，value="Gates"
取回 "lastname" 的值，并把它插到 id="result" 的元素中
刪除 localStorage.lastname

注釋?zhuān)好Q(chēng)/值對(duì)始終存儲(chǔ)為字符串。如果需要請(qǐng)記得把它們轉(zhuǎn)換為其他格式！

sessionStorage 對(duì)象

sessionStorage 對(duì)象等同 localStorage 對(duì)象，不同之處在于只對(duì)一個(gè) session 存儲(chǔ)數(shù)據(jù)。如果用戶(hù)關(guān)閉具體的瀏覽器標(biāo)簽頁(yè)，數(shù)據(jù)也會(huì)被刪除。

與Cookie 對(duì)比

cookie是網(wǎng)站為了標(biāo)示用戶(hù)身份而儲(chǔ)存在用戶(hù)本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。
區(qū)別：

1. cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。
2. 存儲(chǔ)大小限制也不同，
   cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話(huà)標(biāo)識(shí)。
   sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
3. 數(shù)據(jù)有效期不同.
   sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；
   localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；
   cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
4. 作用域不同，
   sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；
   localStorage 在所有同源窗口中都是共享的；
   cookie也是在所有同源窗口中都是共享的。