查看浏览器中的Cookie

我使用的Google浏览器

按下F12弹出下面这个窗口,然后点击上方的Application

然后选中Coookie下的当前网站,然后在右方就是Cookie的信息了

可以用来存一些数据,这些数据都保存在客户端,也就是用户的设备上

例如做前后端分离的项目,后端只提供接口,前端通过ajax获取数据,如此就可以将数据存入Cookie用来判断用户是否登陆,是否...,以及做单点登录

JS操作Cookie

我们可以通过 document.cookie 来获取到 cookie

可以在控制台测试,在浏览器中按下F12,会有如下窗口用来调试

输出document.cookie,返回的是一个"",证明当前页面没有cookie

添加Cookie

Cookie是一串字符串,我们可以通过直接设置的方式来进行添加

这个当时让我纳闷了好一会,解释一下,Cookie是一大串,格式是键=值;... 我们使用document.cookie获取的是所有的cookie

但是cookie可以设置路径(作用于哪个页面),时间(有效时间,单位毫秒),于是乎我们添加的时候是直接设置cookie这一个字符串,但是每个cookie都有对应的路径和时间(独立的)........自行体会

我们通过 document.cookie = "xxx=xxx" 来添加cookie

(document.cookie是获取所有的cookie,但是这样直接赋值是新增一条,而不是替换原有)

在添加的时候,我们可以通过在字符串后添加path来设置路径,默认为 /,例如

document.cookie = "a=b;path=/index.html;"

这样就添加一个一个key为a,vlaue为b,作用路径为/index.html的cookie

也可以设置此cookie有效时间,通过设置expires,单位是毫秒,默认有效时间是浏览器关闭后就失效,也就是一次会话(session)

var date = new Date();
date.setTime(date.getTime() + 100000);
document.cookie = "a=b" + ";expires=" + date.toGMTString();

添加后我们需要刷新页面才可以在控制台看到

Session是有效时间,浏览器关闭后就清除

获取Cookie

通过 document.cookie 来获取,我们可以通过截取字符串的方式来获取到想要的cookie

删除Cookie

删除Cookie只要将失效时间设置为已经失效就行了,也就是重新添加一遍键与要删除的cookie一致的,时间为当前时间-1就行了

源码

我封装的cookie操作代码,并且将cookie进行了加密处理

可以从 Github 上获取压缩后的文件

https://github.com/1711680493/Application/tree/master/ShendiWeb

/**
 * 封装了对 cookie 的操作
 * @author Shendi
 */
var cookie = {
		/** 添加Cookie */
		add : function (key, value, time) {
			var date = new Date();
			date.setTime(date.getTime() + time);
	        document.cookie = escape(btoa(key)) + "=" + escape(btoa(value)) + ";expires=" + date.toGMTString();
		},
		/** 获取Cookie */
		get : function (key) {
			var c = document.cookie;
			if (c != "") {
				var cookies = c.split(";");
				for (let i = 0; i < cookies.length; i++) {
					let map = cookies[i].split("=");
					if (key == atob(unescape(map[0]))) {
						return atob(unescape(map[1]));
					}
				}
			}
		},
		/** 删除指定Cookie */
		del : function (key) {
			var c = document.cookie;
			if (c != "") {
				var cookies = c.split(";");
				for (let i = 0; i < cookies.length; i++) {
					let map = cookies[i].split("=");
					if (key == atob(unescape(map[0]))) {
						var date = new Date();
						date.setTime(date.getTime()-1);
				        document.cookie = escape(btoa(key)) + "=;expires=" + date.toGMTString();
					}
				}
			}
		},
		/** 判断指定 key 是否存在 */
		exists : function (key) {
			var c = document.cookie;
			if (c == "") return false;
			var cookies = c.split(";");
			for (let i = 0; i < cookies.length; i++) {
				if (key == atob(unescape(cookies[i].split("=")[0]))) {
					return true;
				}
			}
			return false;
		},
		/** Cookie是否存在 */
		cookieExists : function () {
			return document.cookie != "";
		},
		/** 清除Cookie */
		clear : function () {
			var date=new Date();
            date.setTime(date.getTime() - 1);
            var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
            if (keys) {
            	for (var i =  keys.length; i--;) document.cookie=keys[i] + "=; expires=" + date.toGMTString();
            }
		}
}

Cookie以及JS对Cookie的操作,附源码

查看浏览器中的Cookie