cookie基础-优快云博客

本文链接：https://blog.youkuaiyun.com/yjzhu1987/article/details/7973523

本文介绍了Cookie的基本概念及其特点，并详细讲解了如何利用JavaScript操作Cookie，包括设置、获取及删除Cookie的方法。此外，还提供了一个具体的示例，展示如何利用Cookie实现自动登录的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是cookie

cookie就是页面用来保存信息，比如自动登录、记住用户名等等。

二、cookie的特点

1、同一个网站中所有的页面共享一套cookie

2、cookie有数量、大小限制

3、cookie有过期时间

三、如何在js中使用cookie

document.cookie

document.cookie = 'username = abc';
document.cookie = 'password = 123';
document.cookie = 'email = abcdef@123.com';

通过上面的代码我们可以发现，document.cookie并不会像定义变量那样被覆盖，这个也是cookie的一个特点吧。

如果没有设置过期时间，那么关闭浏览器就会清空cookie。如何设置过期时间呢？答案是：expires。一般我们会结合Date()来使用。

var oDate = new Date();
oDate.setDate(oDate.getDate() + 30);
document.cookie = 'userid = abc;expires = ' + oDate;

我们可以通过火狐浏览器看到，userid的过期时间是当前时间的30天后。最后我们对获取cookie的方法进行封装。

function setCookie(name, value, iDay){
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = name + '=' + value + ';expires = ' + oDate;
}

学会了如何设置cookie，那么该如何读取cookie呢？

首先我们看下cookie里的内容是什么类型。

document.cookie = 'username = abc';
document.cookie = 'password = 123';
document.cookie = 'email = abcdef@123.com';
alert(document.cookie);  //'username=abc; password=123; email=abcdef@123.com'

得到的类型是字符串，当然这么长的一串并不是我们所想要的，我们要的是读取username，得到abc。

我们可以用string对象的split()方法，把字符串分割成数组，遍历数组匹配我们所要的信息。具体怎么实现的，看下面的代码：

function getCookie(name){
	var arr = document.cookie.split('; ');
	for(var i = 0; i < arr.length; i++){
		var arr2 = arr[i].split('=');
		if(arr2[0] == name){
			return arr2[1];
		}
	}
	return '';
}

这样我们就可以得到我们想要的cookie值了

alert(getCookie('username'));	//abc
alert(getCookie('password'));	//123
alert(getCookie('email'));	//abcdef@123.com

除了设置，获取cookie，我们还可以删除cookie。我们在网上经常看到有清除用户名这样的功能，其实就是用到了清除cookie。

清除cookie其实很简单，只要使过期时间为昨天就可以了。通过前面封装的setCookie来设置。

function removeCookie(name){
	setCookie(name,'1',-1);
}

最后我们将设置，获取，清除cookie封装成一个cookie.js

//设置cookie
function setCookie(name,value,iDay){
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = name + '=' + value + ';expires = ' + oDate;
}
//读取cookie
function getCookie(name){
	var arr = document.cookie.split('; ');
	for(var i = 0; i < arr.length; i++){
		var arr2 = arr[i].split('=');
		if(arr2[0] == name){
			return arr2[1];
		}
	}
	return '';
}
//清除cookie
function removeCookie(name){
	setCookie(name,'1',-1);
}

下面我们把cookie应用的实例吧。最常见的就是记住用户名，当用户登录过一次后，通过cookie记录下用户的账号和密码，这样下次打开页面的时候不用再次输入账号密码了。附上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>记住用户名</title>
</head>
<body>
	<form action="http://www.baidu.com/" id="myform">
		<label for="username">用户名：</label><input type="text" name="username" id="username" />
		<label for="userpass">密码：</label><input type="password" name="userpass" id="userpass" />
		<input type="submit" value="登录" />
		<a href="javascript:;">清楚记录</a>
	</form>
</body>
</html>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
window.onload = function(){
	var oForm = document.getElementById('myform');
	var oTxt1 = document.getElementById('username');
	var oTxt2 = document.getElementById('userpass');
	var oClear = document.getElementsByTagName('a')[0];
	
	oTxt1.value = getCookie('username');
	oTxt2.value = getCookie('userpass');
	
	oForm.onsubmit = function(){
		setCookie('username',oTxt1.value,30);
		setCookie('userpass',oTxt2.value,30);
	}
	
	oClear.onclick = function(){
		removeCookie('username');
		removeCookie('userpass');
		oTxt1.value = '';
		oTxt2.value = '';
	}
}
</script>

PS：博客搬家了，以后不再优快云更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/