本地存儲和Cookies的區(qū)別

1、主講人： 曹興會本地存儲和早期的本地存儲WebStorage與Cookie 的區(qū)別Cookie的區(qū)別HTML5規(guī)范的本地存儲1.早期的本地存儲（1）什么是 Web 本地存儲本地持久化存儲，一直是本地客戶端程序優(yōu)于 web 程序的一個方面。對于本地應(yīng)用程序，操作系統(tǒng)會提供一個抽象層，用于存儲和獲取特定于應(yīng)用程序的數(shù)據(jù)，例如用戶設(shè)置或者運行時狀態(tài)。這些值可以被存儲于注冊表、INI 文件等，或者其他什么地方，這取決于操作系統(tǒng)的實現(xiàn)。如果本地應(yīng)用程序，需要不只是鍵值對形式的本地存儲，可以使用嵌入式數(shù)據(jù)庫、發(fā)明自己定義的文件格式，或者其他很多種解決方案。 然而，web 應(yīng)用程序就沒這些優(yōu)點了。于是在 w

2、eb 早期我們就發(fā)明了 cookie，目的是在本地持久存儲少量數(shù)據(jù)。1.早期的本地存儲（1）什么是 Web 本地存儲Web 應(yīng)用的數(shù)據(jù)可以保存在兩個地方，一個是 Web 服務(wù)器，一個是 Web 客戶端（用戶計算機的瀏覽器的一個目錄）。這兩個地方都有各自適合保存的數(shù)據(jù)：敏感信息，以及不希望別人篡改的數(shù)據(jù)，需要在服務(wù)端處理的數(shù)據(jù)等，需要一直保存在 Web 服務(wù)器 - 安全，高效，可靠；一些不太重要的信息 - 用戶偏好，應(yīng)用狀態(tài)；不同頁面間共享的數(shù)據(jù)；離線狀態(tài)下需要保存的用戶數(shù)據(jù)，需要放在用戶本地；HTML5 之前我們想要在用戶本地保存信息，基本上只能使用 cookie（主要是在瀏覽器和服務(wù)器之間保

3、存身份信息）。cookie 保存少量數(shù)據(jù)很方便，但是它也有一些不好的地方。（2）Cookie的缺陷1.早期的本地存儲數(shù)據(jù)大?。鹤鳛榇鎯θ萜?，cookie的大小限制在4KB左右, 尤其對于現(xiàn)在復(fù)雜的業(yè)務(wù)邏輯需求，4KB的容量只能存儲一些配置字段和簡單的單值信息。安全性問題：由于在HTTP請求中的cookie是明文傳遞的（HTTPS不是），帶來的安全性問題還是很大的。當(dāng)多人共用一臺計算機時使用Cookie可能會泄露用戶隱私，也帶來安全問題.網(wǎng)絡(luò)負(fù)擔(dān)：我們知道cookie會被附加在每個HTTP請求中，在HttpRequest 和HttpResponse的header中都是要被傳輸?shù)?，所以無形中增加了

4、一些不必要的流量損失。1.早期的本地存儲（3）本地存儲的發(fā)展真正需求：更大的存儲空間在客戶端上的不受頁面刷新的影響不需要提交到服務(wù)器正如你所看到的這些解決方案，它們都有或多或少的問題：不是特定于某一瀏覽器，就是需要安裝第三方插件。我們還需要對不同之處做一種“屏蔽”（正如 dojox.storage 所做的那樣），它們有著不同的接口、不同的存儲限制、不同的用戶體驗。這就是 HTML5 所要解決的問題：提供一種標(biāo)準(zhǔn)的 API，由多種瀏覽器提供原生支持，不需要安裝第三方插件。2. HTML5規(guī)范的本地存儲（1）什么是HTML5存儲HTML5 存儲（HTML5 Storage），也就是標(biāo)準(zhǔn)上說的 We

5、b Storage，是一種讓 web 頁面能夠以鍵值對的形式，在客戶端web瀏覽器中將數(shù)據(jù)存儲在本地的方法。就像 cookie 一樣，這種數(shù)據(jù)在你離開 web 站點、關(guān)閉標(biāo)簽頁、退出瀏覽器等等的時候依然保存。不同于 cookie 的地方是，這個數(shù)據(jù)不會被發(fā)送到遠(yuǎn)程 web 服務(wù)器（除非你自己手動發(fā)送）。另外，不同于我們前面所說的那些解決方案，這種機制是 web 瀏覽器原生提供的，所以不需要第三方插件的支持。 目前，幾乎所有主流瀏覽器的最新版本都支持 HTML5 Storage 了，包括 Internet Explorer！IEFirefoxSafariChromeOperaiPhoneAndr

6、oid8.0+3.5+4.0+4.0+10.5+2.0+2.0+2. HTML5規(guī)范的本地存儲（2）HTML5的本地存儲對象HTML 本地存儲提供了兩個在客戶端存儲數(shù)據(jù)的對象：localStorage用于持久化的本地存儲，瀏覽器窗口關(guān)閉后，localStorage存儲的數(shù)據(jù)仍然可以被訪問。所有瀏覽器窗口可以共享localStorage的數(shù)據(jù)，保存的數(shù)據(jù)永遠(yuǎn)不會過期，只能手動刪除。sessionStorage用于本地存儲一個會話中的數(shù)據(jù)，它不是一種持久化的本地存儲。這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問，當(dāng)前頁面不可以訪問新開頁面的數(shù)據(jù)，并且會話結(jié)束后數(shù)據(jù)也隨之銷毀而無法使用.3. WebSt

7、orage與Cookie 的區(qū)別（1） cookie在瀏覽器與服務(wù)器之間來回傳遞。 cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。 sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效。 localStorage 始終有效，長期保存。sessionStorage和localStorage不會把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。（2）數(shù)據(jù)有效期不同：3. WebStorage與Cookie 的區(qū)別（3） cookie數(shù)據(jù)還有路徑的概念，可以限制cookie只屬于某個路徑下。存儲大小也不同，cookie數(shù)據(jù)不能超過4k，sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。（4）作用域不同： sessionStorage不在不同的瀏覽器窗口中共享；