JavaScript操作cookie的创建、查询、删除

一、定义

Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时,他的名字可以记录在 cookie 中。
在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
Cookie 以名/值对形式存储,如下所示:

name=fyovo

二、完整代码示例

下面这段代码为完整的HTML页面示例
您可以将它复制到本地运行 看下实际效果
代码中的注释写的很明白,这里就不做过多的文字说明了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<button onclick="setCookie('fyovo','test cookie value 666',2)">设置cookie</button>
	<button onclick="p.innerHTML = getCookie('fyovo')">查询cookie</button>
	<button onclick="delCookie('fyovo')">删除cookie</button>
	<p id="p"></p>
</body>

<script>
var p = document.getElementById('p');
//1.设置cookie
//三个参数分别为cookie名, cookie值, 过期时间(单位:毫秒)
function setCookie(name, value, expire){
	var cookieString = name + '=' + escape(value) + ';path=/';//escape()函数对字符串进行编码
	//判断是否设置过期时间
	if (expire > 0) {
		var date = new Date();
		date.setTime(date.getTime() + expire*3600*100);
		cookieString += ';expires=' + date.toGMTString();
	}
	document.cookie = cookieString;
}

//2.查询cookie
//一个参数:cookie名
function getCookie(name){
	var cookieString = document.cookie;
	var cookieArray = cookieString.split(';');//split()函数的作用是将cookie字符串以';'分号为标志,分割成数组
	//循环遍历出我们要查找的cookie名
	for (var i = 0; i < cookieArray.length; i++) {
		var arr = cookieArray[i].split('=');
		if (arr[0] == name) {
			//返回解码后的值
			return unescape(arr[1]);//unescape()函数对字符串进行解码
		}
		return null;
	}
}

//3.删除cookie
//一个参数:cookie名
function delCookie(name){
	//删除cookie的原理非常简单,只需将cookie的过期时间设置在当前时间以前的任意时间即可
	var date = 'Thu, 01 Jan 1970 00:00:00 GMT';
	var cookieValue = getCookie(name);
	if (cookieValue != null) {
		document.cookie = name + '=' + cookieValue + ';path=/;expires=' + date;
	}
}
</script>
</html>

风影OvO

风影OvO, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权 | 转载请注明原文链接

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐