前端數據存儲方案集合（cookie localStorage等）以及詳解（一）

知識 08-02

客戶端、前端存儲一、起因

首先解釋下為什麼想來寫這個關於前端存儲的問題，因為最近在做小程序相關的內容。但是，在開發過程中，我們難免會遇到 token 存儲、代碼緩存、圖片存儲等等。以及可能存在的一系列的問題。

現在，我們就專門從瀏覽器存儲入手，來真正的了解緩存存在的場景，以及在日常開發中，我們需要緩存的地方，以及使用緩存會給我們帶來哪些優勢 or bug。

二、緩存的初始狀態

很久很久之前，還在 web 端開發的時候。那個年代其實前後端分離開發模式非常的少，而且你也得去兼容各個大廠提供的瀏覽器。那個時候 IE6789 、火狐、谷歌、Safari 等等。多到有些市場份額很少的就直接捨棄掉。從那個年代過來的人應該都記得國產神瀏覽器 UC （說到這裡，眼淚就流了下來 T—T）


    好吧，好像 扯遠了， 那個年代的 cookie （餅乾、小甜點） 在我第一次接觸到它的時候，哇~ 我是驚嘆的。 原來有這種操作？ 什麼操作呢？ 服務端會在 用戶登錄成功之後 介面返回一個 token ，類似秘鑰一樣的東西，然後 前端就會拿到這個token 然後 緩存在一個 地方， 這個地方 就是 cookie。  然後再次訪問需要有 登陸態的 介面的時候，我們就會 從 cookie 中 讀取 token，然後在 發送 http 請求時候，寫進 header 中。 後端接受到這個 請求以後，就可以獲取到這個  token ，然後經過簡單驗證即可。 驗證通過了，則進行下一步操作。

好了，下一步。我們就進行詳細的介紹 Cookie

三、 Cookie1.1 Cookie 是什麼？

Cookie 翻譯過來就是餅乾、小甜點的意思。是在 web端常見的存儲方式之一，而且在發起 http 請求的時候會自動被帶上。但是這個個人建議不要大量的去使用，因為 cookie 會被帶入進去 http 的請求內容中。請求包可能會越來越大，導致請求速度慢從而影響用戶體驗。

說白了。 cookie 就是保存在客戶端的一段 **字元串**。

cookie可以手動設置，也可以由伺服器產生，當客戶端（瀏覽器）向伺服器發送請求，伺服器會反饋一些信息給客戶端，這些信息的key/value值被瀏覽器作為文件保存在客戶端特定的文件夾中。

1.2 cookie 如何使用

當然我們也會避免不了的會去用到。那麼就介紹下使用的方法吧。

// 存cookie let setCookie = (name, value, times) = > { let date = new Date data.setDate(data.getDate + times) document.cookie = name + "=" + value + ";expires=" + date }


// 取cookie

let getCookie = (name) => {

    let cookies = document.cookie

    let cookieArr = cookies.split(";")

    for(let i = 0; i < cookieArr.length; i++) {

        let arr = cookieArr[i].split("=")

        if (name == arr[0] ) {

 return arr[1]

        }

    }

    return false

}

// 刪除 cookie let removeCookie = (name) => { setCookie(name, "", "-1") // 通過建立 cookie 的時間設置，將時間設置提前一天，從而強行讓 cookie 失效，最後達到刪除cookie 的目的 }

1.3 cookie 的官方定義

這裡，我們看下官方是如何給 cookie 定義的。

前端數據存儲方案集合（cookie localStorage等）以及詳解（一）