引言

一個專案考慮快取和不考慮快取完全是兩個難度，在使用者體驗上也截然不同。考慮快取肯定得了解web本地儲存與它們的區別和適用場景。
正好這次負責一個專案，在做了這個專案後抽空給大家來一次總結，希望能給大家帶來幫助。

cookie

1.是什麼

Cookie指某些網站為了辨別使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。

2.為什麼

因為HTTP協議是無狀態的，即伺服器不知道使用者上一次做了什麼，這嚴重阻礙了互動式Web應用程式的實現。在典型的網上購物場景中，使用者瀏覽了幾個頁面，買了一盒餅乾和兩瓶飲料。最後結帳時，由於HTTP的無狀態性，不通過額外的手段，伺服器並不知道使用者到底買了什麼，所以Cookie就是用來繞開HTTP的無狀態性的“額外手段”之一。伺服器可以設定或讀取Cookies中包含資訊，藉此維護使用者跟伺服器會話中的狀態。

3.設定

前端後端都能設定
前端可以通過js-cookie這個庫來設定鍵值、過期時間、域名，然後主動呼叫介面的時候講cookie放到request header裡面

Cookies.set('name','value', {expires:7,domain:'xxx'})

後端也可以設定cookie，不過設定cookie放在response header裡面
注意cookie是儲存在使用者本地終端的，然後每次訪問網站都會帶上！

4.注意點

Cookie會被附加在每個HTTP請求中，所以無形中增加了流量。

由於在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題，除非用HTTPS。對於儲存登入狀態，用token也比用cookie好，一方面安全，一方面去中心化，後面有空肯定會專門寫一篇文章來細說登入的。

Cookie的大小限制在4KB左右，對於複雜的儲存需求來說是不夠用的。

由於cookie可以設定domain,設定父級域名上的cookie子域名也能讀到，這個是我唯一適用cookie的地方，跨域資訊共享。

H5本地儲存

早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速.
這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能.
於是html5多了兩個web儲存api,localStorage和sessionStorage。

1.localStorage

用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去除

注意點：同源策略，永久性，儲存的是字串，如果是物件需要用jsON.parse、stringify，貌似還有錯誤捕捉的問題(不過我一直用的good-storage庫，從來沒有考慮過這個)

2.sessionStorage

用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料

注意點：唯一和localStorage不同的是它是針對頁籤的。比如在當前頁簽上登入百度，設定ssessionStorage資料,然後在當前頁簽上不管怎麼跳轉，最後只要再回到百度，ssessionStorage資料都存在。但是再開一個頁籤登入百度，則不會有ssessionStorage資料

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

實踐

1.任務描述

有3個網站，A:聚合平臺，B:頭條廣告平臺，C:百度廣告平臺
1.ABC三個從各自域名進都需要單獨登入
2.A登入後可以以A登入事的使用者直接跳到BC的產品頁，不用再登入
3.如果BC是從A跳過去的則可以回退到A,否則回退到登入

2.架構

我們團隊使用的是vue，這裡講下相關的架構

注意事項：
1.ABC都是次級域名，需要一個公司的頂級域名然後設cookie，
2.cookie傳參有大小現實，開始我們的客戶列表太大，傳不過去，我手動進行了拆分和拼接，其實更好的做法是隻傳使用者id過去，到BC了再非同步請求獲取客戶列表

3.通過各種“快取”優化專案

原則
cookie: 各種憑證 舉例：登入憑證token
sessionStorage:重新整理不能丟的資料 舉例：vuex裡面資料，表單里正填了一半的資料
localStorage:量大基本不變的資料，不用再非同步請求 舉例：地圖資料，記住密碼？