京東購物小程序cookie方案實踐

早期為了解決“會話保持”的需求，社區中出現了「cookie方案」并很終成為W3C標準：當某個網站登錄成功后，客戶端（瀏覽器）收到一個cookie標識（文本）并保存下來，在后續請求中會自動帶上這個字段，由此Web后臺可以判定是否同一個用戶，從而使“會話”得以延續。

微信小程序沒有像瀏覽器一樣內置實現了cookie方案，需要開發者自行模擬，而原先京東購物小程序及京喜小程序（現微信一級購物入口）是從微信及手Q購物H5中遷移迭代出來的，也就是說我們不僅要在小程序中模擬一套cookie方案，并且要保持和原業務對cookie處理邏輯的一致，為此我們將實現方向確定為“基于小程序開放能力，和瀏覽器保持一致”。

微信小程序開放了數據緩存Storage和網絡Network這兩種能力，通過這兩套API，我們可以自行DIY一個cookie方案。

PS：本文所有代碼及使用示例都可以在這里找到，閱讀本文時配合實踐，效果更佳。

二、瀏覽器中的cookie

為了保持后端對cookie的處理邏輯和原來的H5一致，小程序的實現需要往瀏覽器看齊。

所以模擬小程序的cookie前，先看看瀏覽器的cookie機制，主要有以下幾個部分：

本地存儲：瀏覽器會在本地分配一塊空間，存儲cookie

請求攜帶：每次發起請求，都會從本地取出cookie并追加在請求頭上

響應設置：當響應頭有Set-Cookie字段時，需要解析并更新

過期時間：每個cookie字段有單獨的過期時間，并且到期會自動清除

讀寫操作：暴露API給前端JS調用，可進行增刪改查操作

作用域：路徑path、域名domin

編碼：cookie值，在網絡傳輸需要encode，建議存儲也一樣

其它：Only、Secure、SameSite

在瀏覽器的DevTools中，可以看到當前站點下的Cookie明細：

三、小程序中的cookie實現

方案設計

在小程序中模擬Cookie，主要涉及五個部分：

其中我們會重點關注「Cookie基礎庫」的實現，另外也會給出「Request基礎庫」的封裝示例。

本地存儲

小程序提供了「數據緩存StorageAPI」（可以理解為Web規范中的LocalStorage），支持存儲“原生類型、Date、及能夠通過JSON.stringify序列化的對象”。

我們可以利用這些API，在Storage中新開一個cookies字段進行存儲：

//存：

wx.setStorageSync('cookies',cookies)

//取：

wx.getStorageSync('cookies')

復制代碼

其中cookies的「存儲結構」如下：

//cookies=

{

cookie1:{//“很小cookie單元”==>cookieItem

name:'cookie1',//cookie名

value:'xxx',//cookie值

expires:'Fri,17Jan202008:49:41GMT'//過期時間，使用GMT（格林威治標準時間）格式

}

},

復制代碼

上面的cookie1便是一個“很小cookie單元cookieItem”，包含了3個字段（name、value、expires），是本文中定義的「標準cookie格式」，也是cookie操作的基本單元。

打開【微信開發工具】的Storage選項卡，可以查看本地存儲的情況：

讀寫操作

這部分主要作為“公共基礎庫“的角色，為外部業務提供增刪改查cookie的API。

1.獲取cookie————getCookie()

步驟：從Storage中取出完整cookies==>取出指定name的cookie項==>校驗有效期==>返回值value

實現如下：

functiongetCookie(name=''){

letcookies=wx.getStorageSync('cookies')//try/catch略過

let{value,expires}=cookies[name]||{}

return(name&&expires&&!isExpired(expires))?decodeURIComponent(cookieItem.value):''

}

復制代碼

2.設置cookie————setCookie()

步驟：從Storage中取出完整cookies==>解析入參==>覆蓋更新==>同步到本地Storage

首先看下本API設計需求：

設置單個/多個cookie

直接傳值/傳cookieItem（Object）

時間格式maxAge/expires