這兩天做購物車邏輯，按照通常的做法，把預購資訊存放在cookie裡，結果發生了很多不可理喻的事情，完整的證明了我對cookie的無知。。。
這麼多年，很少用cookie，因為覺得它不安全。但有些情況使用cookie會大大簡化邏輯和系統負擔，比如登入驗證和購物車，隻要設計和處理得好，也不會有安全問題。
正是因為用的少，偶爾用到，也隻是接觸到皮毛，是以，對cookie的了解和掌握就非常有限，一些無知的地方，這次就暴露無遺了。。。。
下面把遇到問題總結一下，給大家一些參考吧，不一定是對的，都是自己測試得來的經驗。
1. cookie如果指定過期時間為0，也就是永不過期，就不能被删除。
是以想要修改和删除cookie,最初建立時，過期時間必須給個确定值，不要給0值。
這是一号坑，文檔裡不說明一下，害死人了。。。
2. cookie不僅有過期時間的控制，還可以控制作用域、作用頁面路徑。
但出于安全考慮，作用域不能用js操作，必須在服務端操作。
這是二号坑。。。。給了參數，卻不能用，又不說明，非常害人。。。。
而作用頁面的路勁可以用js指定。
3. js指定路徑時，注意路徑放到最後，不要有空格，不要有引号，根目錄直接用'/'，前面不要帶'.'
不指定路徑，預設是目前頁，這點非常坑，意味着必須帶路徑！因為沒人給目前頁設定cookie，沒意義，不如用js變量。
4. 删除cookie時注意，建立時帶路徑時，删除時也要帶上，不然删除不了。
下面是網上找到的jquery.cookie.js的源碼：
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function ($) {
var pluses = /\+/g;
function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}
function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}
function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}
function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
try {
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch (e) { }
}
function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}
var config = $.cookie = function (key, value, options) {
if (arguments.length > 1 && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
}
return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '',
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',//不要被這裡迷惑，沒有用的，如果真指派了，隻會導緻寫入失敗。
options.secure ? '; secure' : ''
].join(''));
}
var result = key ? undefined : {},
cookies = document.cookie ? document.cookie.split('; ') : [],
i = 0,
l = cookies.length;
for (; i < l; i++) {
var parts = cookies[i].split('='),
name = decode(parts.shift()),
cookie = parts.join('=');
if (key === name) {
result = read(cookie, value);
break;
}
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}
return result;
};
config.defaults = {};
$.removeCookie = function (key, options) {
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};
}));
購物車用法舉例：
function GetSCart() {
var sc = $.cookie("S_Cart");
return sc ? JSON.parse($.cookie("S_Cart")) : null;
}
function GetSCartNum() {
var dt = GetSCart();
if (dt && Object.prototype.toString.call(dt) === '[object Array]' && dt.length > 0) {
return dt.length;
} else {
return 0;
}
}
function addSCart(id, num) {
if (!id) return;
num = num || 1;
var dt = GetSCart();
if(dt){
var isExist = false;
if (Object.prototype.toString.call(dt) === '[object Array]' && dt.length > 0) {
for (var i in dt) {
if (dt[i].id == id) {
dt[i].num = num;
isExist = true;
}
}
if (!isExist) {
clearSCart();
dt.push({ "id": id, "num": num });
}
} else {
dt = [{ "id": id, "num": num }];
}
} else {
dt = [{ "id": id, "num": num }];
}
$.cookie("S_Cart", JSON.stringify(dt), { expires: 10, path: '/' });
return dt;
}
function delSCart(id) {
if (!id) return;
var dt = GetSCart();
if (dt) {
if (Object.prototype.toString.call(dt) === '[object Array]' && dt.length > 0) {
var idx = -1;
for (var i in dt) {
idx = dt[i].id == id ? i : -1;
}
if (idx > -1) {
dt.splice(i, 1);
clearSCart();
$.cookie("S_Cart", JSON.stringify(dt), { expires: 10, path: '/' });
}
}
}
}
function clearSCart() {
$.cookie("S_Cart", null, { path: '/' });
}
這是c#背景取cookie的方法：
var ck = Request.Cookies["S_Cart"];
var sCart = HttpUtility.UrlDecode(ck == null ? "" : ck.Value);
c#轉json串為對象的方法：
if (!string.IsNullOrWhiteSpace(S_Cart))
{
List<S_CartParam> cs = new List<S_CartParam>();
DataContractJsonSerializer serializer = new DataContractJsonSerializer(cs.GetType());
MemoryStream mStream = new MemoryStream(Encoding.UTF8.GetBytes(S_Cart));
cs = serializer.ReadObject(mStream) as List<S_CartParam>;
}
簡單js讀寫cookie方法：
/* 使用者資訊cookie處理 */
//寫入cookies
function setCookie(name, value) {
delCookie(name);
var exp = new Date();
exp.setTime(exp.getTime() + 1800 * 1000);//1800秒，30分鐘
document.cookie = name + "=" + escape(JSON.stringify(value)) + ";expires=" + exp.toGMTString() + ';path=/';
}
//讀取cookies
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return JSON.parse(unescape(arr[2]));
else
return null;
}
//删除cookies
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ';path=/';
}
![了解cookie和session的作用、聯系與差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)