如何更好的使用Cookie

Cookie是非常古老的技術,相信每個人都知道它怎么用,用來做什么。每一個http請求,無論是JS、CSS還是圖片等,都會包含相應作用域的Cookie,越多 的Cookie會導致請求頭越大。所以實際使用時,需要多花些心思。

首先,對于頁面上的靜態資源,應該使用cookie- free域名,現在各大公司的xxcdn.com/xxximg.cn除了可以讓資源并行下載,不同大域也可以確保不會被主站Cookie污染到。

其次,對于服務端完全不關心的用戶數據,盡可能使用其它存儲形式,例如userData、localStorage、Flash Cookie等。現在各大JS庫都有提供相應的封裝,我的博客之前也詳細介紹過一些,這里不重點講,自己挑一個用得順手的就行。PS:最近我都是用的曜子寫的的那份。

那些一定要記在Cookie的數據,也有一定的優化余地,來看例子:

local_area字段記錄了一些城市,編碼后非常長,如果選擇存放數字編號會短不少。\u007C對應的|,也可以選擇不編碼存放。

noticeguoqing顧名思義是一個標識,這里用的true/false,可以改為1和0。另外key也可以精簡下,雖說key越短可讀性越差,但可以通過維護 對照表文檔來彌補。

上圖中mpp這個字段,用的query string形式來表示。如果數據類型固定,可以改成特殊符號例如|或:分割,會短不少。

tg、mt、ck1等字段,可以合并為一個字段通過特殊符號隔開存儲。Cookie個數也有上限,能省就省。不過,有些人習慣把JS對象用JSON.stringif y序列化后再存,這樣未嘗不可,但如果能采用定制化的序列化策略,會更省。

l字段,記錄了一個時間戳,長達13位。可以使用下面的方法來優化時間戳:


//選定一個基準時間戳

    var base_time = 1338480000000; //2012-06-01
    var time = 1340117354383; //待優化的時間戳
    var new_time = (time - base_time).toString(36); //"r2u6q7"

減去一個固定值,是為了讓結果更短。如果嫌麻煩,直接toString(36)也能短不少。

除了上面兩個例子,還有一些場景是小域Cookie使用不當,被放在了大域下,影響面也比較廣。

自己的項目里,由于CDN的使用,靜態資源域名cookie-free做得很好;能不用Cookie的場景也都使用了其它的本地存儲方案;對于必須使用Cookie的 場景,無論是Cookie名、Cookie值,還是Cookie個數、作用域都比較混亂,一些是歷史原因,需要逐步規范和統一,任重道遠。

專題「Web 產品思考」的其他文章 ?

  • 頁面動畫滾動的交互細節 (Dec 08, 2013)
  • 兩個常見的 Affix 交互問題 (Nov 25, 2013)
  • 中英文混排及中文引號 (Sep 10, 2013)
  • 關于提高 Tab 切換速度的思考 (Jul 01, 2013)
  • 頁面變灰二三事 (Apr 22, 2013)
  • Chrome擴展與用戶隱私 (Mar 20, 2013)
  • 圖片自動旋轉的前端實現方案 (Feb 15, 2012)
  • FaceBook的NoScript策略 (Sep 10, 2011)
  • 一種效果還不錯的圖片排列策略 (Jul 12, 2011)

所屬標簽

無標簽

25选5玩法中奖