如何更好的使用Cookie
by JerryQu
at 2012-06-19 22:58:31
original http://www.udpwork.com/item/7508.html
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.stringify序列化后再存，这样未尝不可，但如果能采用定制化的序列化策略，会更省。
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个数、作用域都比较混乱，一些是历史原因，需要逐步规范和统一，任重道远。
<div style="margin-top:8px;padding:6px 0;border-top:1px solid #3cf">
<div style="text-align:center;margin:16px 0;padding:6px;border:0px dashed #999;font-family:arial;font-size:26px;font-weight:bold">
<a href="http://www.udpwork.com/item/7508.html#review_form" title="不喜欢" style="text-decoration:none">
<img src="http://www.udpwork.com//images/thumb_down24.gif" alt="">
<span style="color:#f33">0</span>
</a>
<a href="http://www.udpwork.com/item/7508.html#review_form" title="喜欢" style="text-decoration:none">
<img src="http://www.udpwork.com//images/thumb_up24.gif" alt="">
<span style="color:#3c3">0</span>
</a>