前端面試必備——cookie與本地存儲與實踐

引言

一個項目考慮緩存和不考慮緩存徹底是兩個難度，在用戶體驗上也大相徑庭。考慮緩存確定得了解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.注意點

1. Cookie會被附加在每一個HTTP請求中，因此無形中增長了流量。
2. 因爲在HTTP請求中的Cookie是明文傳遞的，因此安全性成問題，除非用HTTPS。對於存儲登陸狀態，用token也比用cookie好，一方面安全，一方面去中心化，後面有空確定會專門寫一篇文章來細說登陸的。
3. Cookie的大小限制在4KB左右，對於複雜的存儲需求來講是不夠用的。

4. 因爲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數據

3.sessionStorage和vuex的關係

1.首先vuex裏面的數據基本上都是各個頁面異步獲取的，全局的，特別重要的信息，若是說刷新瀏覽器，vuex數據丟失報致使報錯確定不能接受，因此咱們應該將vuex裏面的數據存到sessionStorage，刷新的時候vuex從讀取ssessionStorage的數據並進行初始化，那樣就無懼刷新了
2.其次怎麼存儲進去，咱們固然能夠手動存儲，可是太麻煩。這裏咱們用的是另一個包vuex-persistedstate，它能夠自動同步vuex的數據到ssessionStorage,刷新的時候自動讀取ssessionStorage並初始化vuex
3.第三點，也就是我以爲最重要的，就是xxxStorage和vuex的關係，有些人認爲我不用vuex，我數據就存在xxxStorage裏面，還不是同樣能夠，它兩不同的嘛。
實際上xxxStorage和vuex是徹底兩樣的，前者
的做用是存儲，後者的做用是狀態管理，惟一的聯繫就是刷新初始化的時候vuex從xxxStorage裏面拿到數據源來初始化。若是你不理解狀態管理管理是啥子意思，我就不說vuex mutation,action,getter之類的了，最基本的，xxxStorage存儲的數據沒有響應式vuex裏面的數據有響應式。

實踐

1.任務描述

有3個網站，A:聚合平臺，B:B廣告平臺，C:C廣告平臺
1.ABC三個從各自域名進都須要單獨登陸
2.A登陸後能夠以A登陸事的用戶直接跳到BC的產品頁，不用再登陸
3.若是BC是從A跳過去的則能夠回退到A,不然回退到登陸

2.架構

咱們團隊使用的是vue，這裏講下相關的架構
這是一個最基本的簡化過的架構圖,並無涉及到權限，可是基本思路是ok的，

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

上面的架構圖有兩個問題
1.A到B、後怎麼控制只初始化一次，也就是後面即便刷新也不會從新初始化用戶信息
2.怎麼結合權鑑，也就是說上面的A跳C-Content能跳過去，可是我新開一個頁籤網址輸入C-content卻會先跳到登陸頁Clogin，

你們能夠想一下怎麼優化

3.經過各類「緩存」優化項目

原則
cookie: 各類憑證 舉例：登陸憑證token
sessionStorage:刷新不能丟的數據 舉例：vuex裏面數據，表單里正填了一半的數據
localStorage:量大基本不變的數據，不用再異步請求 舉例：地圖數據，記住密碼？

總結

本文首先對cookie以及本地儲存進行了詳細介紹，而後結合本身的項目進行了進一步講解，但願能給各位帶來幫助。此次的文章主要講的是本地存儲相關，並不涉及到瀏覽器緩存（304）之類的，這些內容估計會在下一篇中會詳細介紹下，敬請期待！