6、瀏覽器存儲

多種瀏覽器存儲方式並存，如何選擇？

Cookie

特色：

• 由於HTTP請求無狀態，因此須要cookie去維持客戶端狀態
• 過時時間 expire
• cookie的生成方式(1. http response header中的set-cookie,  2. js中能夠經過document.cookie能夠讀寫cookie)
• 僅僅做爲瀏覽器存儲（大小4KB左右，能力被localstorage替代）
• Cookie（是一個域名維度下的概念，只要是這個域名下的全部請求都會攜帶cookie，可是，是否是這個域名下面的全部請求都須要用cookie？這是不必定的，去請求靜態資源的時候不須要，我只是去請求一個靜態資源好比圖片回來，可是也會帶上去，可是這個cookie這個時候是沒有用的。所以解決辦法就是cdn的域名和主站的域名不同，將靜態資源放在cdn裏面）中在相關域名下面 —— cdn的流量損耗
• Httponly。不容許js讀寫。

Cookie用處：

• 一、用戶瀏覽器和服務器端的交互，保存用戶的狀態，這就是cookie設計的初衷。Cookie能夠經過健身房來比喻，第一次不帶任何東西，辦了會員給了一張卡，下次帶着這個卡，就知道你是上回來過咱們這裏的。
• 二、客戶端自身數據的存儲。做爲瀏覽器存儲，大小4kb，須要設置過時時間expire，可是做爲瀏覽器存儲的話過時時間就沒有必要了，存儲大小也過小了。

LocalStorage

• HTML5設計出來專門用於瀏覽器存儲的，用來代替cookie存儲的功能
• 大小爲5M左右
• 僅在客戶端使用，不和服務端進行通訊
• 接口封裝較好
• 優化：瀏覽器本地緩存方案，提升某個網頁首屏渲染的速度（進到某個頁面，第一次去請求，將返回的數據存在localstorage緩存，第二次的時候就能夠直接從本地緩存中查找了）

SessionStorage

• 會話級別的瀏覽器存儲（瀏覽器中一個tab標籤就是一個會話，這個tab中的數據只能在這個tab中使用，當這個tab關閉了，那麼sessionStorage數據就清空了）
• 大小爲5M左右
• 僅在客戶端使用，不和服務端進行通訊
• 接口封裝較好
• 優化：對於表單信息的維護（好比在一個表單中填寫一些數據，當不當心刷新了，那麼表單裏面的數據都丟了，你須要從新填，若是能把你表單裏面的數據實時的存在session裏面，即便刷新了，數據還在。當關了這個tab,數據也是沒了。還有一個場景就是將一個表單拆成多個，點擊下一步下一步，當咱們後退的時候，當前的這個表單的數據仍是應該保存的）

IndexedDB

• IndexedDB 是一種低級API，用於客戶端存儲大量結構化數據。該API使用索引來實現對該數據的高性能搜索。雖然 Web Storage 對於存儲較少許的數據頗有用，但對於存儲更大量的結構化數據來講，這種方法不太有用。IndexedDB提供了一個解決方案。
• 爲應用建立離線版本

indexDB能夠參考：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

indexDB沒有表的概念，而是objectStore，是一個對象和一個key值相連。

PWA

PWA (Progressive Web Apps) 是一種 Web App 新模型，並非具體指某一種前沿的技術或者某一個單一的知識點，咱們從英文縮寫來看就能看出來，這是一個漸進式的 Web App，是經過一系列新的 Web 特性，配合優秀的 UI 交互設計，逐步的加強 Web App 的用戶體驗。能夠下載lighthouse ，進行PWA測試。

Service Worker

做用：

一、使用攔截和處理網絡請求的能力，去實現一個離線應用。
二、使用Service Worker在後臺運行同時能和頁面通訊的能力，去實現大規模後臺數據的處理

 

做用1demo：安裝中實際上會等待一個promise去返回一個異步的狀態，若是異步狀態返回reject，就進入Error狀態。若是返回成功，安裝就成功了。就進入serviceWorker的激活狀態，就能夠正常的監聽事件併發送相關消息。

demo：https://files.cnblogs.com/files/QianDingwei/deom.rar

下載下來後，npm install,而後node server.js，而後在瀏覽器中輸入http://localhost:8080/index.html，就能夠查看到了

Service Worker更詳細參考：http://www.javashuo.com/article/p-oigsbyhn-mo.html

一、正確使用serviceWorker緩存會大幅度提高性能並節省帶寬。

二、serviceworker能夠經過fetch API 攔截請求，從而查看這個瀏覽器是否支持webp格式的圖片，若是支持咱們就能夠定製請求，向服務器發送請求webp圖片，若是不支持就正常發送就好了，從而提升了性能。一些現代瀏覽器容許用戶在設置中開啓流量節省功能，若是啓用此功能，瀏覽器會爲每一個HTTP請求添加一個新的請求頭，使用ServiceWorker能夠進入fetch事件並決定是否返回網站的輕量級版本