数据存储之Cookie篇

1.什么是cookie?
答:cookie是用于在客户端存储会话信息的。
2.cookie的组成部分?
①名称:一个唯一确定cookie 的名称。建议区分大小写。cookie 的名称必须是经过URL 编码的。
②值:储存在cookie 中的字符串值。值必须被URL 编码。
③域:cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie 信息。这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.com,则对于wrox.com的所有子域都有效)。如果没有明确设定,那么这个域会被认作来自设置cookie 的那个域。
④路径:对于指定域中的那个路径,应该向服务器发送cookie。例如,你可以指定cookie 只有从http://www.wrox.com/books/ 中才能访问,那么http://www.wrox.com 的页面就不会发送cookie 信息,即使请求都是来自同一个域的。
⑤失效时间:表示cookie 何时应该被删除的时间戳。默认情况下,浏览器会话结束时即将所有cookie 删除;不过也可以自己设置删除时间。这个值是个GMT 格式的日期(Wdy, DD-Mon-YYYY HH:MM:SS GMT),用于指定应该删除cookie 的准确时间。因此,cookie
可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间,则cookie 会被立刻删除。
⑥安全标志:指定后,cookie 只有在使用SSL 连接的时候才发送到服务器。例如,cookie 信息只能发送给https://www.wrox.com,而http://www.wrox.com 的请求则不能发送cookie。
3.列举一个cookie的例子?
以下是一个完整的cookie的例子,我们将把它分解开来:
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
①名称: name字符串表示
②值:value字符串表示
③过期时间:Mon, 22-Jan-07 07:10:24 GMT
④域名:.wrox.com
⑤路径:当前目录/
⑥安全标志:secure
4.如何操作cookie?
var CookieUtil = {
// 设置cookie
set : function (name, value, expires, domain, path, secure) {
var cookieText = "";
cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
// name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
// 获取cookie
get : function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = "";
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf (";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
// 删除cookie
unset : function (name, domain, path, secure) {
this.set(name, "", Date(0), domain, path, secure);
}
};
// 测试
CookieUtil.set("name", "zhang");
var name = CookieUtil.get("name");
alert(name); // zhang
CookieUtil.unset("name");
alert(CookieUtil.get("name")); // 空
5.cookie的限制
①存储数据数量有限
②保了储存在cookie 中的信息只能让批准的接受者访问,而无法被其他域访问
③安全性有限
6.针对cookie数据存储少量的问题,我们提出了子cookie的概念。即在每条cookie的值中存储多条数据,用"&"隔开。
var SubCookieUtil = {
/** 设置一条完整的cookie
* param name : 表示cookie的名称,必填
* param subCookies : 表示cookie的值,为一个对象,必填
* param expires : 表示cookie的过期时间,可以不填
* param domain : 表示cookie的域名,可以不填
* param path : 表示cookie的路径,可以不填
* param secure : 表示cookie的安全标志,可以不填
* eg : SubCookieUtil.setAll("info", { name : "zhang", age : 23});
**/
setAll : function (name, subCookies, expires, domain, path, secure) {
var cookieText = "", subName, cookieParts = [];
cookieText += encodeURIComponent(name) + "=";
for(subName in subCookies) {
cookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName]));
}
if (cookieParts.length > 0) {
cookieText += cookieParts.join("&");
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
} else {
cookieText += "; expires=" + Date(0).toGMTString();
}
document.cookie = cookieText;
},
/** 设置一条子cookie
* param name : 表示cookie的名称,必填
* param subName : 表示子cookie的名称,必填
* param value : 表示子cookie的值,必填
* param expires : 表示cookie的过期时间,可以不填
* param domain : 表示cookie的域名,可以不填
* param path : 表示cookie的路径,可以不填
* param secure : 表示cookie的安全标志,可以不填
* eg : SubCookieUtil.set("info", "sex", "boy");
**/
set : function (name, subName, value, expires, domain, path, secure) {
var cookies = this.getAll(name) || {};
cookies[subName] = value;
this.setAll(name, cookies, expires, domain, path, secure);
},
/** 读取一条完整cookie
* param name : 表示cookie的名称,必填
* return : 一个cookie对象
* eg : SubCookieUtil.getAll("info");
**/
getAll : function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = "", i, len, subCookies, parts, result = {};
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf (";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
if (cookieValue.length > 0) {
subCookies = cookieValue.split("&");
for (i = 0, len = subCookies.length; i < len; i++) {
parts = subCookies[i].split("=");
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
/** 获取一条子cookie的值
* param name : 表示cookie的名称,必填
* param subName : 表示子cookie的名称
* return : 一个子cookie的值
* eg : SubCookieUtil.get("info", "name");
**/
get : function (name, subName) {
var cookies = this.getAll(name);
if (cookies) {
return cookies[subName];
} else {
return null;
}
},
/** 删除一条完整cookie
* param name : 表示cookie的名称,必填
* param domain : 表示cookie的域名,可以不填
* param path : 表示cookie的路径,可以不填
* param secure : 表示cookie的安全标志,可以不填
* eg : SubCookieUtil.unsetAll("info");
**/
unsetAll : function (name, domain, path, secure) {
this.setAll(name, "", Date(0).toGMTString(), domain, path, secure);
},
/** 删除一条子cookie
* param name : 表示cookie的名称,必填
* param subName : 表示子cookie的名称,必填
* param domain : 表示cookie的域名,可以不填
* param path : 表示cookie的路径,可以不填
* param secure : 表示cookie的安全标志,可以不填
* eg : SubCookieUtil.unset("info", "name");
**/
unset : function (name, subName, domain, path, secure) {
var cookies = this.getAll(name);
if (cookies) {
delete cookies[subName];
this.setAll(name, cookies, null, domain, path, secure);
}
}
};
// 测试:
var zhang = {
name : "zhang",
age : 23,
height : "178cm",
weight : "66kg"
}
// 设置一条完整的cookie
SubCookieUtil.setAll("zhang", zhang);
// 获取一条完整的cookie
var zhang = SubCookieUtil.getAll("zhang");
alert(zhang.weight); // 66kg
// 再为张添加一个子cookie
SubCookieUtil.set("zhang", "sport", "basketball");
// 获取子cookie
alert(SubCookieUtil.get("zhang", "sport")); // basketball
// 删除一条子cookie
SubCookieUtil.unset("zhang", "age");
alert(SubCookieUtil.get("zhang", "age")); // undefined
// 删除一条完整的cookie
SubCookieUtil.unsetAll("zhang");
alert(SubCookieUtil.getAll("zhang")); // 报错,因为已经被删除
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容