JavaScript 对Cookie 操作的封装小结


Posted in Javascript onDecember 31, 2009

Javascript 没有 private , public 访问权限设置的关键字,但是可以通过一定的技巧来模拟出相同的结果.
首先我们来看下面一行代码:
var i = (1, 2, 3, 4, 5);
变量 i 最后的结果为 5.
这是逗号操作符的结果,也就是说返回最后的一个值,小括号改变了这行代码的优先级,否则 var i = 1, 2, 3, 4, 5; 会报错缺少标识符.

var i = (1, 2, 3, 4, function(){ return 5 * 5;});
变量 i 最后的结果为 一个函数, 返回结果 25.
这就是Javascript 的灵活之处,能够赋值任意类型而不必提前声明.现在我们完全可以进行如下调用:

i();
alert( i() );
来获得返回25的一次方法调用.

我们继续, 变量 i 是通过赋值符来获取函数的引用的, 也就是说在等号右边的小括号运算完后返回的最后一个结果的引用还在,虽然我们无法显示调用,但它确实存在,如果要不通过变量的引用而调用呢?

(1, 2, 3, 4, function(){ alert(5 * 5);})()
上面的代码执行后,弹出一个消息框,显示25.
为了显示方便,我将上个例子的函数改为弹出消息框了.
两对小括号 () (); 前面一对表示返回一个结果,如果该结果为一个函数,由第二对小括号发生调用.
也就是通过前面一对括号发生匿名函数的引用,以便在下面进行引用.这就是对匿名函数的调用.
关于更多匿名函数的使用可以参考文尾的引用连接.

闭包产生的原因是因为作用域的不同,子作用域引用了父作用域的变量,而返回子作用域,父作用域按理来说执行完毕后该销毁掉了,只是子作用域一直存在,且一直握有父作用域的引用,所以才一直保留.
来看下面的代码

function parent() { 
var a = 1; 
function child(){ 
var b = 2; 
alert(a); 
alert(b); 
} 
}

父函数 parent 中包含了一个 child 子函数,在子函数中有一个对父函数中 a 变量的引用(输出其值).
我们来让父函数执行完后返回其声明的子函数
function parent() { 
var a = 1; 
function child(){ 
var b = 2; 
alert(a); 
alert(b); 
} 
return child; 
} 
var t = parent(); 
t();

在10行中, 我们执行了parent 函数,返回了在函数内部声明的函数 child,这时变量 t 持有该返回对象(此时是一个可以执行的函数)的引用,在11行代码中我们调用了它.结果分别输出了 1 和 2.
注意,输出 2, 是因为我们在子函数体内声明了一个变量,而输出 1, 我们在该函数体内并没有相应的定义变量 a ,而是发生了对父函数里的变量的引用,也就是说引用了父作用域的变量.
而此时又能能够完成输出的,也就是说变量 a 还存在.可是我们无法直接对其引用 (比如 parent.a),因为函数已经执行完毕,没有了其相应的引用,我们只能通过所返回的子函数的引用来进行访问.
假如我又在父函数中声明了其他的变量呢? 结果是一样的,子函数能够访问,而如果子函数并不返回相应的引用的话,我们根本无法从外部访问到.这就形成了闭包.

闭包能够干些什么呢?如果你有一个不想让外部随意修改的变量该怎么做?那就去使用闭包.

myObj = {}; //声明一个全局变量,它是一个window对象的属性(window.myObj) 
(function(){ 
var i = 4; 
myObj = { //引用全局变量,对其进行赋值 
getI : function() { //get方法,一个函数 
return i; 
}, 
setI : function(val) { //set方法,限制值的设定 
if(val > 100) { 
alert("i connt > 100"); 
return; 
} 
i = val; 
} 
} 
})(); //匿名函数的调用,由于也是一个函数,所以作为一个子作用域,在执行完之后销毁,避免代码污染 
myObj.setI(5); //成功 
myObj.setI(101); //失败 
alert(myObj.getI()); 
alert(myObj.i); //错误,没有该属性

至此我们简单的实现了public 访问权限以及 private 访问权限 (也就给你想给你的,不给你不想给你的)

在页面中,我们通常使用 document.cookie 属性来访问,对其赋新值就会创建一个新的Cookie,一个Cookie通常具有五个属性:value (存储的值), date (UTC格式的时间,代表什么时间过期, domain (域,Cookie的所有者), Path (子目录).
而在平常的开发中,如果仅仅使用 document.cookie 属性进行访问,会很麻烦,因为只能向其赋值字符串,并且在读取后还要进行字符串切割,才能获取指定变量名称的值.document.cookie 读取时,返回的是所有赋值的值,而不包括过期时间,域之类的信息,只能再次独设置.
下面就附上代码,全部封装到Cookie全局对象中,暴露出几个方法.
Get : 放回指定所有cookie字符串.
Set : 设置cookie 字符串.
Clear : 清除所有cookie对象.
GetDayTime : 获取指定距今val天的Date对象.
Write : 写cookie.已重载.详见代码.
Query : 查询cookie. 已重载.详见代码.
Update : 修改cookie.
Delete : 删除cookie.

代码1-7

Cookie = {}; 
/* 
* Date对象的setTime方法是设置距离1970-01-01以来的毫秒数,设置到对象里去,返回的是据那以后的毫秒数而不是原对象. 
* 如果Cookie 不设置 expires 属性,或者expires 时间比本地时间少,那么将会在下一次浏览时过期. 
* document.cookie 对象返回的是所有值的字符串形式,不包含 expires 或者其他. 
* 
*/ 
(function() { 
var nDay = 24 * 60 * 60 * 1000; 
var isString = function(v) { 
return typeof v === "string"; 
} 
var isArray = function(v) { 
return Object.prototype.toString.apply(v) == "[object Array]"; 
} 
var isObject = function(v) { 
return v && typeof v == "object"; 
} 
var isDate = function(v) { 
return Object.prototype.toString.apply(v) == "[object Date]"; 
} 
var getTime = function() { 
return new Date().getTime(); 
} 
var trim = function(val) { 
return (val || "").replace(/^\s+|\s+$/g, ""); 
} 
var tryEval = function(val) { 
var Obj, e; 
try { 
Obj = eval(val); 
} catch (e) { 
Obj = val; 
} 
return Obj; 
} 
var ObjectToString = function(o) { 
var tstr = "{"; 
for (var v in o) { 
if (isArray(o[v])) { 
tstr += v + ":" + ArrayToString(o[v]) + ","; 
} else if (isObject(o[v])) { 
tstr += v + ":" + ObjectToString(o[v]) + ","; 
} else if (isString(o[v])) { 
tstr += v + ":\"" + o[v].toString() + "\","; 
} else { 
tstr += v + ":" + o[v].toString() + ","; 
} 
} 
return tstr.slice(0, -1) + "}"; 
} 
var ArrayToString = function(o) { 
var tstr = "["; 
for (var v in o) { 
if (isArray(o[v])) { 
tstr += ArrayToString(o[v]) + ","; 
} else if (isObject(o[v])) { 
tstr += ObjectToString(o[v]) + ","; 
} else { 
tstr += o[v].toString() + ","; 
} 
} 
return tstr.slice(0, -1) + "]"; ; 
} 
Cookie = { 
Get: function() { 
return document.cookie; 
}, 
Set: function(val) { 
document.cookie = val; 
}, 
Clear: function() { 
var temp = this.Query(); 
var o; 
for (o in temp) { 
this.Delete(o); 
} 
}, 
GetDayTime: function(val) { 
var texpires = new Date(); 
texpires.setTime(texpires.getTime() + val * nDay); 
return texpires; 
}, 
Write: function() { 
/* 
* Cookie.Write(Object); 写入对象,名称为main; 
* Cookie.Write(varname, Object); varname:变量名, Object:写入对象; 
* Cookie.Write(Object, Date); Object:写入对象, Date:过期时间; 
* Cookie.Write(varname, Object, Date); varname:变量名, Object:写入对象, Date:过期时间; 
* Cookie.Write(varname, Object, Date, Domain, Path); varname:变量名, Object:写入对象, Date:过期时间, Domain:域, Path: 子目录; 
*/ 
if (arguments.length == 1) { 
var tvalue = arguments[0]; 
var tstr = ""; 
var texpires = new Date(); texpires.setTime(texpires.getTime() + 1 * nDay); 
if (isArray(tvalue)) { 
tstr = ArrayToString(tvalue); 
} else if (isObject(tvalue)) { 
tstr = ObjectToString(tvalue); 
} else { 
tstr = tvalue.toString(); 
} 
tstr = "main=" + escape(tstr) + ";expires=" + texpires.toGMTString() + ";"; 
} else if (arguments.length == 2) { 
var tname, tvalue, texpires, tstr = ""; 
if (isDate(arguments[1])) { 
tname = "main"; 
tvalue = arguments[0]; 
texpires = arguments[1]; 
} else { 
tname = arguments[0]; 
tvalue = arguments[1]; 
texpires = new Date(); texpires.setTime(texpires.getTime() + 1 * nDay); 
} 
if (isArray(tvalue)) { 
tstr += ArrayToString(tvalue); 
} else if (isObject(tvalue)) { 
tstr += ObjectToString(tvalue); 
} else { 
tstr = tvalue.toString(); 
} 
tstr = tname + "=" + escape(tvalue) + ";expires=" + texpires.toGMTString() + ";"; 
} else if (arguments.length == 3) { 
var tname = arguments[0], tvalue = arguments[1], texpires = arguments[2], tstr = ""; 
if (isArray(tvalue)) { 
tstr = ArrayToString(tvalue); 
} else if (isObject(tvalue)) { 
tstr = ObjectToString(tvalue); 
} else { 
tstr = tvalue.toString(); 
} 
tstr = tname + "=" + escape(tvalue) + ";expires=" + texpires.toGMTString() + ";"; 
} else if (arguments.length == 5) { 
var tname = arguments[0], tvalue = arguments[1], texpires = arguments[2], tdomain = arguments[3], tpath = arguments[4], tstr = ""; 
if (isArray(tvalue)) { 
tstr = ArrayToString(tvalue); 
} else if (isObject(tvalue)) { 
tstr = ObjectToString(tvalue); 
} else { 
tstr = tvalue.toString(); 
} 
tstr = tname + "=" + escape(tvalue) + ";expires=" + texpires.toGMTString() + ";domain=" + tdomain + ";path=" + tpath + ";"; 
} 
alert(tstr); 
this.Set(tstr); 
}, 
Query: function() { 
/* 
* Cookie.Query(); 返回所有Cookie值组成的Object; 
* Cookie.Query(string); 返回指定名称的Object; 失败则返回 undefined; 
* Cookie.Query(string, Object); 为指定对象写入指定名称的Object,并返回; 失败则返回 undefined; 
*/ 
var tname = tvalue = "", tright = -1; 
var tstr = this.Get(); 
var tObj = {}; 
if (arguments.length == 0) { 
var i = 0; 
do { 
tname = trim(tstr.slice(i, tstr.indexOf("=", i))); 
tright = tstr.indexOf(";", i); 
if (tright == -1) { 
tvalue = unescape(tstr.slice(tstr.indexOf("=", i) + 1, tstr.length)); 
} else { 
tvalue = unescape(tstr.slice(tstr.indexOf("=", i) + 1, tright)); 
} 
tObj[tname] = tryEval(tvalue); 
i = tstr.indexOf(";", i) == -1 ? -1 : tstr.indexOf(";", i) + 1; 
} while (i != -1); 
} else { 
tname = arguments[0]; 
if (tstr.indexOf(tname) == -1) return undefined; 
var i = tstr.indexOf(tname); 
tname = trim(tstr.slice(i, tstr.indexOf("=", i))); 
tright = tstr.indexOf(";", tstr.indexOf(tname)) == -1 ? tstr.length : tstr.indexOf(";", tstr.indexOf(tname)); 
tvalue = unescape(tstr.slice(tstr.indexOf(tname) + tname.length + 1, tright)); 
if (arguments.length == 1) { 
tObj = tryEval(tvalue); 
} else if (arguments.length == 2) { 
tObj = arguments[1]; 
tObj[tname] = tryEval(tvalue); 
} 
} 
return tObj; 
}, 
Update: function() { 
return this.Write.apply(this, arguments); 
}, 
Delete: function() { 
if (arguments.length == 1) { 
var varname = arguments[0]; 
if (this.Query(varname)) { 
this.Update(varname, "", new Date(1970, 01, 01)); 
} 
} 
} 
}

其中有一个从字符串eval 成对象的执行,以及从Object 或者 Array 对象获得对应字符串形式的功能函数,模拟了一些JSON的操作.当然,并不能存储所有的JavaScript 对象,仅仅满足一部分,我已经感觉够用了.

个人理解有限,请各位多多指教.
Javascript的匿名函数 : http://dancewithnet.com/2008/05/07/javascript-anonymous-function/
Javascript的闭包 : http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2007/08/JavaScriptClosures.html
Cookie 文件的格式 : http://www.cnblogs.com/sephil/archive/2008/05/06/cookiefmt.html

Javascript 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
Javascript的闭包
Dec 31 #Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 #Javascript
JavaScript 常用函数
Dec 30 #Javascript
jQuery的三种$()
Dec 30 #Javascript
jquery UI 1.72 之datepicker
Dec 29 #Javascript
用js做一个小游戏平台 (一)
Dec 29 #Javascript
js 学习笔记(三)
Dec 29 #Javascript
You might like
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
url decode problem 解决方法
2011/12/26 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
电气工程师岗位职责
2014/01/01 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
中介业务员岗位职责
2014/04/09 职场文书
安全标语口号
2014/06/09 职场文书
运动会广播稿100字
2014/09/14 职场文书
文艺晚会开场白
2015/05/29 职场文书
2016年元旦致辞
2015/08/01 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript