第詳解JS瀏覽器儲存目錄引言CookieCookie是什么Cookie生成方式Cookie的應(yīng)用場景Cookie的缺點解決方法LocalStorage特點使用示例使用場景SeesionStorage特點使用場景Cookie、LocalStorage和SessionStorage之間的區(qū)別作用域的不同生命周期的不同總結(jié)

引言

隨著對前端的了解越來越深入，了解到了很多種瀏覽器的存儲方案，如Cookie、LocalStorage等，哪這些存儲方案有何異同，分別的適用場景又是什么呢。

Cookie

Cookie的來源

Cookie被創(chuàng)造出來的本意并不是本地儲存，而是為了辨別用戶身份。眾所周知，Http協(xié)議是無狀態(tài)的，也就是說你每一次發(fā)送給服務(wù)器的請求對于服務(wù)器來說都是孤立的，服務(wù)器不知道這這些請求來自于誰。比如你向購物車?yán)锩嫣砑恿艘恍┥唐?，但是?dāng)發(fā)送結(jié)賬請求的時候服務(wù)器懵了，我怎么知道你是誰，你買了什么呢。而使用Cookie之后，服務(wù)器就可以通過查看Cookie來判斷發(fā)送用戶，一定程度上Cookies可以說是請求的身份證?？梢愿嬖V服務(wù)器請求發(fā)送自誰。

Cookie是什么

百聞不如一見，直接來看看Cookie長啥樣

這是百度首頁使用的Cookie，如你所見，Cookie是以Name-Value鍵值對儲存在瀏覽器中的，其中Value又是明顯經(jīng)過了加密的數(shù)據(jù)。

Cookie生成方式

Cookie是所屬于域名的，還是百度首頁的Cookie，通過Domain屬性可以得知前兩個Cookie是屬于.的

每個域名只能設(shè)置與訪問到自己域名下的Cookie，比如無法訪問Domain為的Cookie。但是子域名可以讀取父域名設(shè)置的Cookie，比如截圖中就讀取到了Domain='.'的Cookie，通過手動設(shè)置Domain可以設(shè)置父域名的Cookie，比如可以設(shè)置Domain=''這樣*.所有二級域名也能讀取到它設(shè)置的Cookie

//

document.cookie='age=20;domain=.'

//此時所有二級域名可以直接讀取到這個Cookie

Cookie的生成方式分為服務(wù)器端生成和瀏覽器端生成。

服務(wù)器端-通過設(shè)置httpresponseheader中的set-cookie

我們可以通過響應(yīng)頭里的Set-Cookie指定要存儲的Cookie值。當(dāng)請求返回瀏覽器的時候瀏覽器就會按照header中的set-cookie值設(shè)置Cookie。默認(rèn)情況下，Domain被設(shè)置為設(shè)置Cookie頁面的主機名，當(dāng)然我們也可以手動設(shè)置Domain的值。

Set-Cookie:id=a3fWa;

瀏覽器端-js中可以通過document.cookie可以讀寫cookie，以鍵值對的形式展示

document.cookie="id=a3fWa"

document.cookie='age=20;domain=.'

Cookie的應(yīng)用場景

既然Cookie的作用就是告訴服務(wù)器請求來自于誰，那么最主要的作用就是保持用戶登陸態(tài)（記住密碼），除此之外還可以記錄用戶瀏覽數(shù)據(jù)，進行廣告推送和前文提到的購物車等。

Cookie的缺點

缺點其實在前文中就很顯而易見了

不夠大

Cookie會隨著每一次請求發(fā)送，這就注定了Cookie必定會有嚴(yán)格的大小限制，每一個Cookie的大小被限制在了4kb，值得注意的是4kb指的是一個Name-Value的大小，而并不是說這個域名可以設(shè)置的Cookie總大小只有4kb

性能缺陷

Cookie是跟隨著域名的，會隨著每一個同域名請求發(fā)送，但是其實很大一部分請求，比如說圖片等靜態(tài)資源的請求是完全用不著Cookie的，雖然每個Cookie只有4kb但是積少成多也會帶來巨大的資源浪費。

我們可以把靜態(tài)資源放到CDN上去，這時候圖片域名就和主站域名不相同了，就不會附帶發(fā)送Cookie

不夠安全

正如上文直接打開控制臺就可以看到Cookie一樣，Cookie雖然通過編碼進行了加密，但在Http傳輸中是明文傳輸，腳本也可以很輕松的獲取到Cookie，非常容易被破解。

在服務(wù)器端設(shè)置Cookie的時候附帶上HttpOnly標(biāo)記，這樣在瀏覽器端就無法使用document.cookie訪問到這個Cookie了

Set-Cookie:id=a3fWa;HttpOnly

標(biāo)記為Secure的Cookie只應(yīng)通過Https協(xié)議加密過的請求發(fā)送，但是即便如此也不應(yīng)該使用Cookie儲存敏感信息，因為Cookie有其固有的不安全性，這兩個標(biāo)記也無法提供確切的安全保障。

解決方法

既然Cookie有這么多缺點，有沒有什么一勞永逸的解決方法呢，那就是「專業(yè)的人做專業(yè)的事」。

用戶登錄態(tài)和部分用戶信息的存儲的工作交給Seesion---即Cookie只用來儲存一個用戶唯一標(biāo)識符，真正信息儲存在服務(wù)器端，使用Cookie作為SeesionID去服務(wù)器查找信息，這樣一來Cookie的容量限制，安全問題都引刃而解了，因為此時Cookie里面就是一串無意義的隨機碼。

本地儲存得工作交由html5中新增本地存儲的解決方案「WebStorage」，它又分成兩類：localStorage和SessionStorage，接下來就介紹這兩兄弟。

LocalStorage

特點

數(shù)據(jù)長時間保存，直到手動刪除為止

大小約為5M

和Cookie一樣，一個網(wǎng)站只能訪問和操作自己網(wǎng)站域名下的數(shù)據(jù)

僅在客戶端使用，和服務(wù)端無通信

接口封裝較好

使用鍵值對保存信息

同源窗口都可以訪問

使用示例

LocalStorage使用非常方便：

//設(shè)置數(shù)據(jù)

localStorage.setItem("key","value");

//讀取數(shù)據(jù)

letvalueLocal=localStorage.getItem("key");

使用場景

通過上面那些特性就可以看出LocalStorage非常適合用來做本地緩存，可以提高首屏加載速度。一些圖片等不會經(jīng)常改變的大資源也可以緩存下來，減少網(wǎng)絡(luò)請求。

SeesionStorage

保存時間為本次會話，也就是說窗口關(guān)閉就沒了

僅本窗口可以訪問，同源的其他窗口都不行大

小約為5M

sessionStorage更適合用來存儲生命周期和它同步的會話級別的信息。這些信息只適用于當(dāng)前會話，比如可以用來做表單數(shù)據(jù)的持久化，防止刷新后表單數(shù)據(jù)丟失

Cookie、LocalStorage和SessionStorage之間的區(qū)別

作用域的不同

這三者都遵循協(xié)議，即同協(xié)議，同域名，同端口下才能訪問和修改同一份數(shù)據(jù)，唯一不同的就是SeesionStorage還要求在同一窗口。

生命周期的不同

Cookie可以手動設(shè)置過期時間，默認(rèn)就是本次會話時長，隨著窗口關(guān)閉而刪除，當(dāng)設(shè)置了過期時間時候，就會被儲存到硬盤中直到過期時間才被刪除

LocalStorage是持久化的本地儲存，除非你手動刪除，否則會一直存在

SessionStorage是會話級別的存儲，也是隨著窗口關(guān)閉而刪除。

總結(jié)

這就是幾種瀏覽器存儲方案，當(dāng)然還有我們應(yīng)