本文經授權轉自公眾號CSDN(ID：CSDNnews)作者 | 浪里行舟責編 | 郭芮

隨著移動網絡的發展與演化，我們手機上現在除了有原生 App，還能跑“WebApp”——它即開即用，用完即走。一個優秀的 WebApp 甚至可以擁有和原生 App 媲美的功能和體驗。

WebApp 優異的性能表現，有一部分原因要歸功于瀏覽器存儲技術的提升。cookie存儲數據的功能已經很難滿足開發所需，逐漸被WebStorage、IndexedDB所取代，本文將介紹這幾種存儲方式的差異和優缺點。

Cookie

1、Cookie的來源

Cookie 的本職工作并非本地存儲，而是“維持狀態”。因為HTTP協議是無狀態的，HTTP協議自身不對請求和響應之間的通信狀態進行保存，通俗來說，服務器不知道用戶上一次做了什么，這嚴重阻礙了交互式Web應用程序的實現。

在典型的網上購物場景中，用戶瀏覽了幾個頁面，買了一盒餅干和兩瓶飲料。最后結帳時，由于HTTP的無狀態性，不通過額外的手段，服務器并不知道用戶到底買了什么，于是就誕生了Cookie。它就是用來繞開HTTP的無狀態性的“額外手段”之一。服務器可以設置或讀取Cookies中包含信息，借此維護用戶跟服務器會話中的狀態。

我們可以把Cookie 理解為一個存儲在瀏覽器里的一個小小的文本文件，它附著在 HTTP 請求上，在瀏覽器和服務器之間“飛來飛去”。它可以攜帶用戶信息，當服務器檢查 Cookie 的時候，便可以獲取到客戶端的狀態。

在剛才的購物場景中，當用戶選購了第一項商品，服務器在向用戶發送網頁的同時，還發送了一段Cookie，記錄著那項商品的信息。當用戶訪問另一個頁面，瀏覽器會把Cookie發送給服務器，于是服務器知道他之前選購了什么。用戶繼續選購飲料，服務器就在原來那段Cookie里追加新的商品信息。結帳時，服務器讀取發送來的Cookie就行了。

2、什么是Cookie及應用場景？

Cookie指某些網站為了辨別用戶身份而儲存在用戶本地終端上的數據(通常經過加密)。 cookie是服務端生成，客戶端進行維護和存儲。通過cookie,可以讓服務器知道請求是來源哪個客戶端，就可以進行客戶端狀態的維護，比如登陸后刷新，請求頭就會攜帶登陸時response header中的set-cookie,Web服務器接到請求時也能讀出cookie的值，根據cookie值的內容就可以判斷和恢復一些用戶的信息狀態。

如上圖所示，Cookie 以鍵值對的形式存在。

典型的應用場景有：

• 記住密碼，下次自動登錄；
• 購物車功能；
• 記錄用戶瀏覽數據，進行商品(廣告)推薦。

3、Cookie的原理及生成方式

Cookie的原理：

第一次訪問網站的時候，瀏覽器發出請求，服務器響應請求后，會在響應頭里面添加一個Set-Cookie選項，將cookie放入到響應請求中，在瀏覽器第二次發請求的時候，會通過Cookie請求頭部將Cookie信息發送給服務器，服務端會辨別用戶身份，另外，Cookie的過期時間、域、路徑、有效期、適用站點都可以根據需要來指定。

Cookie的生成方式主要有兩種：

• 生成方式一：http response header中的set-cookie

我們可以通過響應頭里的 Set-Cookie 指定要存儲的 Cookie 值。默認情況下，domain 被設置為設置 Cookie 頁面的主機名，我們也可以手動設置 domain 的值。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2018 07:28:00 GMT;//可以指定一個特定的過期時間(Expires)或有效期(Max-Age)

當Cookie的過期時間被設定時，設定的日期和時間只與客戶端相關，而不是服務端。

• 生成方式二：js中可以通過document.cookie可以讀寫cookie，以鍵值對的形式展示

例如我們在掘金社區控制臺輸入以下三句代碼，便可以在Chrome 的 Application 面板查看生成的cookie：

document.cookie="userName=hello"document.cookie="gender=male"document.cookie='age=20;domain=.baidu.com'

從上圖中我們可以得出：

Domain 標識指定了哪些域名可以接受Cookie。如果沒有設置domain，就會自動綁定到執行語句的當前域。 如果設置為”.baidu.com”,則所有以”baidu.com”結尾的域名都可以訪問該Cookie，所以在掘金社區上讀取不到第三條代碼存儲Cookie值。

4、Cookie的缺陷

• Cookie 不夠大

Cookie的大小限制在4KB左右，對于復雜的存儲需求來說是不夠用的。當 Cookie 超過 4KB 時，它將面臨被裁切的命運。這樣看來，Cookie 只能用來存取少量的信息。此外很多瀏覽器對一個站點的cookie個數也是有限制的。

這里需注意：各瀏覽器的cookie每一個name=value的value值大概在4k，所以4k并不是一個域名下所有的cookie共享的,而是一個name的大小。

• 過多的 Cookie 會帶來巨大的性能浪費

Cookie 是緊跟域名的。同一個域名下的所有請求，都會攜帶 Cookie。大家試想，如果我們此刻僅僅是請求一張圖片或者一個 CSS 文件，我們也要攜帶一個 Cookie 跑來跑去(關鍵是 Cookie 里存儲的信息并不需要)，這是一件多么勞民傷財的事情。Cookie 雖然小，請求卻可以有很多，隨著請求的疊加，這樣的不必要的 Cookie 帶來的開銷將是無法想象的。

cookie是用來維護用戶信息的，而域名(domain)下所有請求都會攜帶cookie，但對于靜態文件的請求，攜帶cookie信息根本沒有用，此時可以通過cdn(存儲靜態文件的)的域名和主站的域名分開來解決。 - 由于在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題，除非用HTTPS。

5、Cookie與安全

HttpOnly 不支持讀寫，瀏覽器不允許腳本操作document.cookie去更改cookie， 所以為避免跨域腳本 (XSS) 攻擊，通過JavaScript的 Document.cookie API無法訪問帶有 HttpOnly 標記的Cookie，它們只應該發送給服務端。如果包含服務端 Session 信息的 Cookie 不想被客戶端 JavaScript 腳本調用，那么就應該為其設置 HttpOnly 標記。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

標記為 Secure 的Cookie只應通過被HTTPS協議加密過的請求發送給服務端。但即便設置了 Secure 標記，敏感信息也不應該通過Cookie傳輸，因為Cookie有其固有的不安全性，Secure 標記也無法提供確實的安全保障。

為了彌補 Cookie 的局限性，讓“專業的人做專業的事情”，Web Storage 出現了。

HTML5中新增了本地存儲的解決方案——Web Storage，它分成兩類：sessionStorage和localStorage。這樣有了WebStorage后，cookie能只做它應該做的事情了——作為客戶端與服務器交互的通道，保持客戶端狀態。

2

LocalStorage

1、LocalStorage的特點

• 保存的數據長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據；
• 大小為5M左右；
• 僅在客戶端使用，不和服務端進行通信；
• 接口封裝較好。

基于上面的特點，LocalStorage可以作為瀏覽器本地緩存方案，用來提升網頁首屏渲染速度(根據第一請求返回時，將一些不變信息直接存儲在本地)。

2、存入/讀取數據

localStorage保存的數據，以“鍵值對”的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。所有的數據都是以文本格式保存。 存入數據使用setItem方法。它接受兩個參數，第一個是鍵名，第二個是保存的數據。

localStorage.setItem("key

總結

以上是生活随笔為你收集整理的localstorage存储大小_Cookie 已凉，Web 存储该这么做！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。