IT工程師數位筆記本

客戶端、前端 存儲

一、 起 因

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


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

二、緩存的 初始狀態

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

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

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

三、 Cookie

1.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 定義的。

1） name： cookie 的名稱
2） value： cookie 的 值
3） maxAge： cookie 的 最大有效期
4） secure： 是否使用安全協議傳輸
5） path： cookie 使用的 路徑。 不同路徑無法獲取到。
6） domain： cookie 的域， 和 path 類似。主要防止跨域攻擊。
7） comment： 該cookie 的用處說明
8） version：cookie 的版本

1.4 cookie 使用時注意事項

1） cookie 是有大小限制的，每個cookie 所存放的數據不能超過 4k， 如果超過則該屬性將返回空字符串。

如果我們需要在客戶端存儲更大的數據，怎么辦？ 后面我們還會介紹到 userDate 和 localStorage（最大是5M） 等等。

2） 通常我們需要將 存放的 value 值 進行 escape 編碼。 然后在使用的時候 再用 unescape() 函數，反編碼 就好了。

3）重要的信息不要放 cookie

好了~ 本期的 cookie 相關的內容就講到這里了。 下面會持續更新一系列關于 客戶端存儲的內容。