瀏覽器緩存

為什么需要瀏覽器緩存？

對于瀏覽器的緩存，主要針對的是前端的靜態(tài)資源，最好的效果就是，在發(fā)起請求之后，拉取相應(yīng)的靜態(tài)資源，并保存在本地。如果服務(wù)器的靜態(tài)資源沒有更新，那么在下次請求的時(shí)候，就直接從本地讀取即可，如果服務(wù)器的靜態(tài)資源已經(jīng)更新，那么我們再次請求的時(shí)候，就到服務(wù)器拉取新的資源，并保存在本地。這樣就大大的減少了請求的次數(shù)，提高了網(wǎng)站的性能。這就要用到瀏覽器的緩存策略了。

所謂的瀏覽器緩存指的是瀏覽器將用戶請求過的靜態(tài)資源，存儲(chǔ)到電腦本地磁盤中，當(dāng)瀏覽器再次訪問時(shí)，就可以直接從本地加載，不需要再去服務(wù)端請求了。

使用瀏覽器緩存，有以下優(yōu)點(diǎn)：

• 減少了服務(wù)器的負(fù)擔(dān)，提高了網(wǎng)站的性能
• 加快了客戶端網(wǎng)頁的加載速度
• 減少了多余網(wǎng)絡(luò)數(shù)據(jù)傳輸

對瀏覽器的緩存機(jī)制的理解

瀏覽器緩存的全過程：

• 瀏覽器第一次加載資源，服務(wù)器返回 200，瀏覽器從服務(wù)器下載資源文件，并緩存資源文件與 response header，以供下次加載時(shí)對比使用；
• 下一次加載資源時(shí)，由于強(qiáng)制緩存優(yōu)先級(jí)較高，先比較當(dāng)前時(shí)間與上一次返回 200 時(shí)的時(shí)間差，如果沒有超過 cache-control 設(shè)置的 max-age，則沒有過期，并命中強(qiáng)緩存，直接從本地讀取資源。如果瀏覽器不支持HTTP1.1，則使用 expires 頭判斷是否過期；
• 如果資源已過期，則表明強(qiáng)制緩存沒有被命中，則開始協(xié)商緩存，向服務(wù)器發(fā)送帶有 If-None-Match 和 If-Modified-Since 的請求；
• 服務(wù)器收到請求后，優(yōu)先根據(jù) Etag 的值判斷被請求的文件有沒有做修改，Etag 值一致則沒有修改，命中協(xié)商緩存，返回 304；如果不一致則有改動(dòng)，直接返回新的資源文件帶上新的 Etag 值并返回 200；
• 如果服務(wù)器收到的請求沒有 Etag 值，則將 If-Modified-Since 和被請求文件的最后修改時(shí)間做比對，一致則命中協(xié)商緩存，返回 304；不一致則返回新的 last-modified 和文件并返回 200；

很多網(wǎng)站的資源后面都加了版本號(hào)，這樣做的目的是：每次升級(jí)了 JS 或 CSS 文件后，為了防止瀏覽器進(jìn)行緩存，強(qiáng)制改變版本號(hào)，客戶端瀏覽器就會(huì)重新下載新的 JS 或 CSS 文件 ，以保證用戶能夠及時(shí)獲得網(wǎng)站的最新更新。

協(xié)商緩存和強(qiáng)緩存的區(qū)別

強(qiáng)緩存

使用強(qiáng)緩存策略時(shí)，如果緩存資源有效，則直接使用緩存資源，不必再向服務(wù)器發(fā)起請求。

強(qiáng)緩存策略可以通過兩種方式來設(shè)置，分別是 http 頭信息中的 Expires 屬性和 Cache-Control 屬性。

（1）服務(wù)器通過在響應(yīng)頭中添加 Expires 屬性，來指定資源的過期時(shí)間。在過期時(shí)間以內(nèi)，該資源可以被緩存使用，不必再向服務(wù)器發(fā)送請求。這個(gè)時(shí)間是一個(gè)絕對時(shí)間，它是服務(wù)器的時(shí)間，因此可能存在這樣的問題，就是客戶端的時(shí)間和服務(wù)器端的時(shí)間不一致，或者用戶可以對客戶端時(shí)間進(jìn)行修改的情況，這樣就可能會(huì)影響緩存命中的結(jié)果。
（2）Expires 是 http1.0 中的方式，因?yàn)樗囊恍┤秉c(diǎn)，在 HTTP 1.1 中提出了一個(gè)新的頭部屬性就是 Cache-Control 屬性，它提供了對資源的緩存的更精確的控制。它有很多不同的值。

Cache-Control可設(shè)置的字段：

• public：設(shè)置了該字段值的資源表示可以被任何對象（包括：發(fā)送請求的客戶端、代理服務(wù)器等等）緩存。這個(gè)字段值不常用，一般還是使用max-age=來精確控制；
• private：設(shè)置了該字段值的資源只能被用戶瀏覽器緩存，不允許任何代理服務(wù)器緩存。在實(shí)際開發(fā)當(dāng)中，對于一些含有用戶信息的HTML，通常都要設(shè)置這個(gè)字段值，避免代理服務(wù)器(CDN)緩存；
• no-cache：設(shè)置了該字段需要先和服務(wù)端確認(rèn)返回的資源是否發(fā)生了變化，如果資源未發(fā)生變化，則直接使用緩存好的資源；
• no-store：設(shè)置了該字段表示禁止任何緩存，每次都會(huì)向服務(wù)端發(fā)起新的請求，拉取最新的資源；
• max-age=：設(shè)置緩存的最大有效期，單位為秒；
• s-maxage=：優(yōu)先級(jí)高于max-age=，僅適用于共享緩存(CDN)，優(yōu)先級(jí)高于max-age或者Expires頭；
• max-stale[=]：設(shè)置了該字段表明客戶端愿意接收已經(jīng)過期的資源，但是不能超過給定的時(shí)間限制。

一般來說只需要設(shè)置其中一種方式就可以實(shí)現(xiàn)強(qiáng)緩存策略，當(dāng)兩種方式一起使用時(shí)，Cache-Control 的優(yōu)先級(jí)要高于 Expires。

no-cache和no-store很容易混淆：

• no-cache 是指先要和服務(wù)器確認(rèn)是否有資源更新，在進(jìn)行判斷。也就是說沒有強(qiáng)緩存，但是會(huì)有協(xié)商緩存；
• no-store 是指不使用任何緩存，每次請求都直接從服務(wù)器獲取資源。

協(xié)商緩存

如果命中強(qiáng)制緩存，我們無需發(fā)起新的請求，直接使用緩存內(nèi)容，如果沒有命中強(qiáng)制緩存，如果設(shè)置了協(xié)商緩存，這個(gè)時(shí)候協(xié)商緩存就會(huì)發(fā)揮作用了。

上面已經(jīng)說到了，命中協(xié)商緩存的條件有兩個(gè)：

• max-age=xxx 過期了
• 值為no-store

使用協(xié)商緩存策略時(shí)，會(huì)先向服務(wù)器發(fā)送一個(gè)請求，如果資源沒有發(fā)生修改，則返回一個(gè) 304 狀態(tài)，讓瀏覽器使用本地的緩存副本。如果資源發(fā)生了修改，則返回修改后的資源。

協(xié)商緩存也可以通過兩種方式來設(shè)置，分別是 http 頭信息中的 Etag 和 Last-Modified 屬性。
（1）服務(wù)器通過在響應(yīng)頭中添加 Last-Modified 屬性來指出資源最后一次修改的時(shí)間，當(dāng)瀏覽器下一次發(fā)起請求時(shí)，會(huì)在請求頭中添加一個(gè) If-Modified-Since 的屬性，屬性值為上一次資源返回時(shí)的 Last-Modified 的值。當(dāng)請求發(fā)送到服務(wù)器后服務(wù)器會(huì)通過這個(gè)屬性來和資源的最后一次的修改時(shí)間來進(jìn)行比較，以此來判斷資源是否做了修改。如果資源沒有修改，那么返回 304 狀態(tài)，讓客戶端使用本地的緩存。如果資源已經(jīng)被修改了，則返回修改后的資源。使用這種方法有一個(gè)缺點(diǎn)，就是 Last-Modified 標(biāo)注的最后修改時(shí)間只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，那么文件已將改變了但是 Last-Modified 卻沒有改變，這樣會(huì)造成緩存命中的不準(zhǔn)確。
（2）因?yàn)?Last-Modified 的這種可能發(fā)生的不準(zhǔn)確性，http 中提供了另外一種方式，那就是 Etag 屬性。服務(wù)器在返回資源的時(shí)候，在頭信息中添加了 Etag 屬性，這個(gè)屬性是資源生成的唯一標(biāo)識(shí)符，當(dāng)資源發(fā)生改變的時(shí)候，這個(gè)值也會(huì)發(fā)生改變。在下一次資源請求時(shí)，瀏覽器會(huì)在請求頭中添加一個(gè) If-None-Match 屬性，這個(gè)屬性的值就是上次返回的資源的 Etag 的值。服務(wù)接收到請求后會(huì)根據(jù)這個(gè)值來和資源當(dāng)前的 Etag 的值來進(jìn)行比較，以此來判斷資源是否發(fā)生改變，是否需要返回資源。通過這種方式，比 Last-Modified 的方式更加精確。

當(dāng) Last-Modified 和 Etag 屬性同時(shí)出現(xiàn)的時(shí)候，Etag 的優(yōu)先級(jí)更高。使用協(xié)商緩存的時(shí)候，服務(wù)器需要考慮負(fù)載平衡的問題，因此多個(gè)服務(wù)器上資源的 Last-Modified 應(yīng)該保持一致，因?yàn)槊總€(gè)服務(wù)器上 Etag 的值都不一樣，因此在考慮負(fù)載平衡時(shí)，最好不要設(shè)置 Etag 屬性。

總結(jié)：
強(qiáng)緩存策略和協(xié)商緩存策略在緩存命中時(shí)都會(huì)直接使用本地的緩存副本，區(qū)別只在于協(xié)商緩存會(huì)向服務(wù)器發(fā)送一次請求。它們緩存不命中時(shí)，都會(huì)向服務(wù)器發(fā)送請求來獲取資源。在實(shí)際的緩存機(jī)制中，強(qiáng)緩存策略和協(xié)商緩存策略是一起合作使用的。瀏覽器首先會(huì)根據(jù)請求的信息判斷，強(qiáng)緩存是否命中，如果命中則直接使用資源。如果不命中則根據(jù)頭信息向服務(wù)器發(fā)起請求，使用協(xié)商緩存，如果協(xié)商緩存命中的話，則服務(wù)器不返回資源，瀏覽器直接使用本地資源的副本，如果協(xié)商緩存不命中，則瀏覽器返回最新的資源給瀏覽器。

點(diǎn)擊刷新按鈕或者按 F5、按 Ctrl+F5 （強(qiáng)制刷新）、地址欄回車有什么區(qū)別？

• 點(diǎn)擊刷新按鈕或者按 F5：瀏覽器直接對本地的緩存文件過期，但是會(huì)帶上If-Modifed-Since，If-None-Match，這就意味著服務(wù)器會(huì)對文件檢查新鮮度，返回結(jié)果可能是 304，也有可能是 200。
• 用戶按 Ctrl+F5（強(qiáng)制刷新）：瀏覽器不僅會(huì)對本地文件過期，而且不會(huì)帶上 If-Modifed-Since，If-None-Match，相當(dāng)于之前從來沒有請求過，返回結(jié)果是 200。
• 地址欄回車： 瀏覽器發(fā)起請求，按照正常流程，本地檢查是否過期，然后服務(wù)器檢查新鮮度，最后返回內(nèi)容。

瀏覽器本地存儲(chǔ)

前端儲(chǔ)存的方式有哪些？

• cookies： 在HTML5標(biāo)準(zhǔn)前本地儲(chǔ)存的主要方式，優(yōu)點(diǎn)是兼容性好，請求頭自帶cookie方便，缺點(diǎn)是大小只有4k，?動(dòng)請求頭加?cookie浪費(fèi)流量，每個(gè)domain限制20個(gè)cookie，使?起來麻煩，需要??封裝；
• localStorage：HTML5加?的以鍵值對(Key-Value)為標(biāo)準(zhǔn)的方式，優(yōu)點(diǎn)是操作?便，永久性儲(chǔ)存（除非手動(dòng)刪除），大小為5M，兼容IE8+ ；
• sessionStorage：與localStorage基本類似，區(qū)別是sessionStorage當(dāng)頁面關(guān)閉后會(huì)被清理，?且與cookie、localStorage不同，他不能在所有同源窗?中共享，是會(huì)話級(jí)別的儲(chǔ)存?式；
• Web SQL：2010年被W3C廢棄的本地?cái)?shù)據(jù)庫數(shù)據(jù)存儲(chǔ)?案，但是主流瀏覽器（?狐除外）都已經(jīng)有了相關(guān)的實(shí)現(xiàn)，web sql類似于SQLite，是真正意義上的關(guān)系型數(shù)據(jù)庫，?sql進(jìn)?操作，當(dāng)我們?JavaScript時(shí)要進(jìn)?轉(zhuǎn)換，較為繁瑣；
• IndexedDB： 是被正式納入HTML5標(biāo)準(zhǔn)的數(shù)據(jù)庫儲(chǔ)存?案，它是NoSQL數(shù)據(jù)庫，?鍵值對進(jìn)?儲(chǔ)存，可以進(jìn)?快速讀取操作，非常適合web場景，同時(shí)?JavaScript進(jìn)?操作會(huì)非常方便。

Cookie

Cookie是最早被提出來的本地存儲(chǔ)方式，在此之前，服務(wù)端是無法判斷網(wǎng)絡(luò)中的兩個(gè)請求是否是同一用戶發(fā)起的，為解決這個(gè)問題，Cookie就出現(xiàn)了。Cookie的大小只有4kb，它是一種純文本文件，每次發(fā)起HTTP請求都會(huì)攜帶Cookie。

Cookie的特性

• Cookie一旦創(chuàng)建成功，名稱就無法修改
• Cookie是無法跨域名的，也就是說a域名和b域名下的cookie是無法共享的，這也是由Cookie的隱私安全性決定的，這樣就能夠阻止非法獲取其他網(wǎng)站的Cookie
• 每個(gè)域名下Cookie的數(shù)量不能超過20個(gè)，每個(gè)Cookie的大小不能超過4kb
• 有安全問題，如果Cookie被攔截了，那就可獲得session的所有信息，即使加密也于事無補(bǔ)，無需知道cookie的意義，只要轉(zhuǎn)發(fā)cookie就能達(dá)到目的
• Cookie在請求一個(gè)新的頁面的時(shí)候都會(huì)被發(fā)送過去

如果需要域名之間跨域共享Cookie，有兩種方法：

1. 使用Nginx反向代理
2. 在一個(gè)站點(diǎn)登陸之后，往其他網(wǎng)站寫Cookie。服務(wù)端的Session存儲(chǔ)到一個(gè)節(jié)點(diǎn)，Cookie存儲(chǔ)sessionId

Cookie的使用場景

● 最常見的使用場景就是Cookie和session結(jié)合使用，我們將sessionId存儲(chǔ)到Cookie中，每次發(fā)請求都會(huì)攜帶這個(gè)sessionId，這樣服務(wù)端就知道是誰發(fā)起的請求，從而響應(yīng)相應(yīng)的信息。
● 可以用來統(tǒng)計(jì)頁面的點(diǎn)擊次數(shù)

Cookie有哪些字段，作用分別是什么

Cookie由以下字段組成：

• Name：cookie的名稱
• Value：cookie的值，對于認(rèn)證cookie，value值包括web服務(wù)器所提供的訪問令牌；
• Size： cookie的大小
• Path：可以訪問此cookie的頁面路徑。 比如domain是abc.com，path是/test，那么只有/test路徑下的頁面可以讀取此cookie。
• Secure： 指定是否使用HTTPS安全協(xié)議發(fā)送Cookie。使用HTTPS安全協(xié)議，可以保護(hù)Cookie在瀏覽器和Web服務(wù)器間的傳輸過程中不被竊取和篡改。該方法也可用于Web站點(diǎn)的身份鑒別，即在HTTPS的連接建立階段，瀏覽器會(huì)檢查Web網(wǎng)站的SSL證書的有效性。但是基于兼容性的原因（比如有些網(wǎng)站使用自簽署的證書）在檢測到SSL證書無效時(shí)，瀏覽器并不會(huì)立即終止用戶的連接請求，而是顯示安全風(fēng)險(xiǎn)信息，用戶仍可以選擇繼續(xù)訪問該站點(diǎn)。
• Domain：可以訪問該cookie的域名，Cookie 機(jī)制并未遵循嚴(yán)格的同源策略，允許一個(gè)子域可以設(shè)置或獲取其父域的 Cookie。當(dāng)需要實(shí)現(xiàn)單點(diǎn)登錄方案時(shí)，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻擊的危險(xiǎn)，比如攻擊者可以借此發(fā)動(dòng)會(huì)話定置攻擊。因而，瀏覽器禁止在 Domain 屬性中設(shè)置.org、.com 等通用頂級(jí)域名、以及在國家及地區(qū)頂級(jí)域下注冊的二級(jí)域名，以減小攻擊發(fā)生的范圍。
• HTTP： 該字段包含HTTPOnly 屬性 ，該屬性用來設(shè)置cookie能否通過腳本來訪問，默認(rèn)為空，即可以通過腳本訪問。在客戶端是不能通過js代碼去設(shè)置一個(gè)httpOnly類型的cookie的，這種類型的cookie只能通過服務(wù)端來設(shè)置。該屬性用于防止客戶端腳本通過document.cookie屬性訪問Cookie，有助于保護(hù)Cookie不被跨站腳本攻擊竊取或篡改。但是，HTTPOnly的應(yīng)用仍存在局限性，一些瀏覽器可以阻止客戶端腳本對Cookie的讀操作，但允許寫操作；此外大多數(shù)瀏覽器仍允許通過XMLHTTP對象讀取HTTP響應(yīng)中的Set-Cookie頭。
• Expires/Max-size ： 此cookie的超時(shí)時(shí)間。若設(shè)置其值為一個(gè)時(shí)間，那么當(dāng)?shù)竭_(dá)此時(shí)間后，此cookie失效。不設(shè)置的話默認(rèn)值是Session，意思是cookie會(huì)和session一起失效。當(dāng)瀏覽器關(guān)閉(不是瀏覽器標(biāo)簽頁，而是整個(gè)瀏覽器) 后，此cookie失效。

總結(jié)：
服務(wù)器端可以使用 Set-Cookie 的響應(yīng)頭部來配置 cookie 信息。一條cookie 包括了5個(gè)屬性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的時(shí)間，domain 是域名、path是路徑，domain 和 path 一起限制了 cookie 能夠被哪些 url 訪問。secure 規(guī)定了 cookie 只能在確保安全的情況下傳輸，HttpOnly 規(guī)定了這個(gè) cookie 只能被服務(wù)器訪問，不能使用 js 腳本訪問。

LocalStorage

LocalStorage是HTML5新引入的特性，由于有的時(shí)候我們存儲(chǔ)的信息較大，Cookie就不能滿足我們的需求，這時(shí)候LocalStorage就派上用場了。

LocalStorage的優(yōu)點(diǎn)

• 在大小方面，LocalStorage的大小一般為5MB，可以儲(chǔ)存更多的信息
• LocalStorage是持久儲(chǔ)存，并不會(huì)隨著頁面的關(guān)閉而消失，除非主動(dòng)清理，不然會(huì)永久存在
• 僅儲(chǔ)存在本地，不像Cookie那樣每次HTTP請求都會(huì)被攜帶

LocalStorage的缺點(diǎn)

• 存在瀏覽器兼容問題，IE8以下版本的瀏覽器不支持
• 如果瀏覽器設(shè)置為隱私模式，那我們將無法讀取到LocalStorage
• LocalStorage受到同源策略的限制，即端口、協(xié)議、主機(jī)地址有任何一個(gè)不相同，都不會(huì)訪問

LocalStorage的常用API

// 保存數(shù)據(jù)到 localStorage
localStorage.setItem('key', 'value');

// 從 localStorage 獲取數(shù)據(jù)
let data = localStorage.getItem('key');

// 從 localStorage 刪除保存的數(shù)據(jù)
localStorage.removeItem('key');

// 從 localStorage 刪除所有保存的數(shù)據(jù)
localStorage.clear();

// 獲取某個(gè)索引的Key
localStorage.key(index)

LocalStorage的使用場景

• 有些網(wǎng)站有換膚的功能，這時(shí)候就可以將換膚的信息存儲(chǔ)在本地的LocalStorage中，當(dāng)需要換膚的時(shí)候，直接操作LocalStorage即可
• 在網(wǎng)站中的用戶瀏覽信息也會(huì)存儲(chǔ)在LocalStorage中，還有網(wǎng)站的一些不常變動(dòng)的個(gè)人信息等也可以存儲(chǔ)在本地的LocalStorage中

SessionStorage

SessionStorage和LocalStorage都是在HTML5才提出來的存儲(chǔ)方案，SessionStorage 主要用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，刷新頁面時(shí)不會(huì)刪除，關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。

SessionStorage與LocalStorage對比

• SessionStorage和LocalStorage都在本地進(jìn)行數(shù)據(jù)存儲(chǔ)；
• SessionStorage也有同源策略的限制，但是SessionStorage有一條更加嚴(yán)格的限制，SessionStorage只有在同一瀏覽器的同一窗口下才能夠共享；
• LocalStorage和SessionStorage都不能被爬蟲爬取；

SessionStorage的常用API

// 保存數(shù)據(jù)到 sessionStorage
sessionStorage.setItem('key', 'value');

// 從 sessionStorage 獲取數(shù)據(jù)
let data = sessionStorage.getItem('key');

// 從 sessionStorage 刪除保存的數(shù)據(jù)
sessionStorage.removeItem('key');

// 從 sessionStorage 刪除所有保存的數(shù)據(jù)
sessionStorage.clear();

// 獲取某個(gè)索引的Key
sessionStorage.key(index)

SessionStorage的使用場景

由于SessionStorage具有時(shí)效性，所以可以用來存儲(chǔ)一些網(wǎng)站的游客登錄的信息，還有臨時(shí)的瀏覽記錄的信息。當(dāng)關(guān)閉網(wǎng)站之后，這些信息也就隨之消除了。

Cookie、LocalStorage、SessionStorage區(qū)別

瀏覽器端常用的存儲(chǔ)技術(shù)是 cookie 、localStorage 和 sessionStorage。

• cookie：其實(shí)最開始是服務(wù)器端用于記錄用戶狀態(tài)的一種方式，由服務(wù)器設(shè)置，在客戶端存儲(chǔ)，然后每次發(fā)起同源請求時(shí)，發(fā)送給服務(wù)器端。cookie 最多能存儲(chǔ) 4k 數(shù)據(jù)，它的生存時(shí)間由 expires 屬性指定，并且 cookie 只能被同源的頁面訪問共享。
• sessionStorage：html5 提供的一種瀏覽器本地存儲(chǔ)的方法，它借鑒了服務(wù)器端 session 的概念，代表的是一次會(huì)話中所保存的數(shù)據(jù)。它一般能夠存儲(chǔ) 5M 或者更大的數(shù)據(jù)，它在當(dāng)前窗口關(guān)閉后就失效了，并且 sessionStorage 只能被同一個(gè)窗口的同源頁面所訪問共享。
• localStorage：html5 提供的一種瀏覽器本地存儲(chǔ)的方法，它一般也能夠存儲(chǔ) 5M 或者更大的數(shù)據(jù)。它和 sessionStorage 不同的是，除非手動(dòng)刪除它，否則它不會(huì)失效，并且 localStorage 也只能被同源頁面所訪問共享。

上面三種方式都是存儲(chǔ)少量數(shù)據(jù)的時(shí)候的存儲(chǔ)方式，當(dāng)需要在本地存儲(chǔ)大量數(shù)據(jù)的時(shí)候，我們可以使用瀏覽器的 indexDB。這是瀏覽器提供的一種本地的數(shù)據(jù)庫存儲(chǔ)機(jī)制。它不是關(guān)系型數(shù)據(jù)庫，它內(nèi)部采用對象倉庫的形式存儲(chǔ)數(shù)據(jù)，它更接近 NoSQL 數(shù)據(jù)庫。

Web Storage 和 cookie 的區(qū)別總結(jié)如下

• Web Storage是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie 的大小是受限的，并且每次你請求一個(gè)新的頁面的時(shí)候 Cookie 都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬；
• cookie 需要指定作用域，不可以跨域調(diào)用；
• Web Storage 擁有 setItem,getItem,removeItem,clear 等方法，不像 cookie 需要前端開發(fā)者自己封裝 setCookie，getCookie；
• Cookie 也是不可以或缺的：Cookie 的作用是與服務(wù)器進(jìn)行交互，作為 HTTP 規(guī)范的一部分而存在 ，而 Web Storage 僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。

IndexedDB有哪些特點(diǎn)？

• 鍵值對儲(chǔ)存：IndexedDB 內(nèi)部采用對象倉庫（object store）存放數(shù)據(jù)。所有類型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對象。對象倉庫中，數(shù)據(jù)以"鍵值對"的形式保存，每一個(gè)數(shù)據(jù)記錄都有對應(yīng)的主鍵，主鍵是獨(dú)一無二的，不能有重復(fù)，否則會(huì)拋出一個(gè)錯(cuò)誤。
• 異步：IndexedDB 操作時(shí)不會(huì)鎖死瀏覽器，用戶依然可以進(jìn)行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的。異步設(shè)計(jì)是為了防止大量數(shù)據(jù)的讀寫，拖慢網(wǎng)頁的表現(xiàn)。
• 支持事務(wù)：IndexedDB 支持事務(wù)（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個(gè)事務(wù)就都取消，數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分?jǐn)?shù)據(jù)的情況。
• 同源限制：IndexedDB 受到同源限制，每一個(gè)數(shù)據(jù)庫對應(yīng)創(chuàng)建它的域名。網(wǎng)頁只能訪問自身域名下的數(shù)據(jù)庫，而不能訪問跨域的數(shù)據(jù)庫。
• 儲(chǔ)存空間大：IndexedDB 的儲(chǔ)存空間比 LocalStorage 大得多，一般來說不少于 250MB，甚至沒有上限。
• 支持二進(jìn)制儲(chǔ)存：IndexedDB 不僅可以儲(chǔ)存字符串，還可以儲(chǔ)存二進(jìn)制數(shù)據(jù)（ArrayBuffer 對象和 Blob 對象）。