javascript中cookie的使用与解析

最新推荐文章于 2023-03-01 11:17:19 发布

_再见阿郎_

最新推荐文章于 2023-03-01 11:17:19 发布

阅读量771

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/FU250/article/details/48626211

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在最近开发的两个项目中，实现登录界面中的记住密码功能，使用到了cookie，回顾发现使用的cookie方式不太一样：

第一种是自己编写封装的方法。

第二种使用的是jQuery支持的cookie。

接下来分别对这两种方式进行对比和比较。

1、通过JavaScript操作DOM的document的cookie，代码如下：

function setCookie(name, value)//两个参数，一个是cookie的名子，一个是值 
{
	var Days = 30;
	//此 cookie 将被保存 30 天     
	var exp = new Date();
	exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
	document.cookie = name + "=" + encodeURIComponent(value) + ";expires="
			+ exp.toGMTString();
}
function getCookie(name)//取cookies函数        
{
	var arr = document.cookie
			.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
	if (arr != null)
		return decodeURIComponent(arr[2]);
	return null;
}
function delCookie(name)//删除cookie
{
	var exp = new Date();
	exp.setTime(exp.getTime() - 1);//删除cookie将时间设置为过去的时间，判断为已失效将cookie清除
	var cval = getCookie(name);
	if (cval != null)
		document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

以上代码有以下几个主要重点：

a:给document.cookie添加参数的形式为key(参数名)=value(值);expires=date(GMT格式日期)，key和value不用多说，主要expires的值可能不太清楚，expires的值是很重要的，它代表着你传入的key和value保存在cookie中的时间，假如没有给它赋值那么它将会在浏览器关闭的时候存入的key、value将会被清除，设置了时间，时间到了也将清除，但是赋值的expires并不会出现在document.cookie中即你设置值为name=patrick;expires="Mon, 21 Sep 2015 12:50:49 GMT"最后获取的只是name=patrick。

b:encodeURIComponent和decodeURIComponent函数的使用，例如name=j/k经过处理encode处理后为"name%3Dj%2Fk"这样做能减少特殊符号带来的影响。

d:(String).match()方法的使用，它的定义为可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，再通过以下结果：

"name=patrick; password=123456".match(/(^| )name=([^;]*)(;|$)/)处理为["name=patrick;", "", "patrick", ";"]，这就是为什么获取cookie的值得时候为arr[2]，感兴趣的话可对其他值得获取深究下。

2、为Jquery封装的cookie，jquery.cookie.min.js，处理格式后的代码如下：

(function(a) {
	if (typeof define === "function" && define.amd) {
		define(["jquery"], a)
	} else {
		a(jQuery)
	}
}(function(e) {
	var a = /\+/g;

	function d(g) {
		return g
	}

	function b(g) {
		return decodeURIComponent(g.replace(a, " "))
	}

	function f(g) {
		if (g.indexOf('"') === 0) {
			g = g.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, "\\")
		}
		try {
			return c.json ? JSON.parse(g) : g
		} catch (h) {}
	}
	var c = e.cookie = function(p, o, u) {
		if (o !== undefined) {
			u = e.extend({}, c.defaults, u);
			if (typeof u.expires === "number") {
				var q = u.expires,
					s = u.expires = new Date();
				s.setDate(s.getDate() + q)
			}
			o = c.json ? JSON.stringify(o) : String(o);
			return (document.cookie = [c.raw ? p : encodeURIComponent(p), "=", c.raw ? o : encodeURIComponent(o), u.expires ? "; expires=" + u.expires.toUTCString() : "", u.path ? "; path=" + u.path : "", u.domain ? "; domain=" + u.domain : "", u.secure ? "; secure" : ""].join(""))
		}
		var g = c.raw ? d : b;
		var r = document.cookie.split("; ");
		var v = p ? undefined : {};
		for (var n = 0, k = r.length; n < k; n++) {
			var m = r[n].split("=");
			var h = g(m.shift());
			var j = g(m.join("="));
			if (p && p === h) {
				v = f(j);
				break
			}
			if (!p) {
				v[h] = f(j)
			}
		}
		return v
	};
	c.defaults = {};
	e.removeCookie = function(h, g) {
		if (e.cookie(h) !== undefined) {
			e.cookie(h, "", e.extend({}, g, {
				expires: -1
			}));
			return true
		}
		return false
	}
}));

以上代码虽然很庞大，但是实际操作效果还是一样的，但是jQuery的封装效果好，不会污染变量名，第一种方式对 setCookie、 getCookie、 delCookie名称进行了占用，可能在使用cookie时造成的影响不大，但是jQuery的代码中的思想还是很值的学习的。

在JavaScript学习当中难免会碰到大段而生涩的代码，那么先抓住代码中的核心内容尤为关键，能让我们在工作中快速解决问题，相关的编码思想需要一个慢慢理解的过程。