083_JavaScript Cookies_while (c.charat(0) == ' ') c = c.substring(1);-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109655132

本文介绍了Cookie的基本概念及其实现方式。详细讲解了如何使用JavaScript创建、读取、修改和删除Cookie，并提供了一个具体的示例。

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

1. 什么是cookie?

1.1. Cookie 是在您的计算机上存储在小的文本文件中的数据。

1.2. 当web服务器向浏览器发送网页后, 连接被关闭, 服务器会忘记用户的一切。

1.3. Cookie是为了解决"如何记住用户信息"而发明的:

当用户访问网页时, 他的名字可以存储在cookie中。
下次用户访问该页面时, cookie会"记住"他的名字。

1.4. 当浏览器从服务器请求一个网页时, 将属于该页的cookie添加到该请求中。这样服务器就获得了必要的数据来"记住"用户的信息。

1.5. 如果浏览器已关闭本地cookie支持, 则以下实例均无法工作。

2. 通过JavaScript创建cookie

2.1. JavaScript可以用document.cookie属性创建、读取、删除cookie。

2.2. 通过JavaScript, 可以这样创建cookie:

document.cookie = "username=Bill Gates";

2.3. 您还可以添加有效日期(UTC 时间)。默认情况下, 在浏览器关闭时会删除cookie:

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

2.4. 通过path参数, 您可以告诉浏览器cookie属于什么路径。默认情况下, cookie属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

3. 通过JavaScript读取cookie

3.1.通过JavaScript, 可以这样读取cookie:

var x = document.cookie;

3.2. document.cookie会在一条字符串中返回所有cookie, 比如:

cookie1=value; cookie2=value; cookie3=value;

4. 通过JavaScript改变cookie

4.1. 通过使用JavaScript, 你可以像你创建cookie一样改变它:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

4.2. 通过重新赋值, 新的cookie值覆盖旧的cookie值。

5. 通过JavaScript删除cookie

5.1. 删除cookie非常简单, 删除cookie时不必指定cookie值, 直接把expires参数设置为过去的日期即可:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

5.2. 您应该定义cookie路径以确保删除正确的cookie。如果你不指定路径, 一些浏览器不会让你删除cookie。

6. 例子

6.1. 新建一个Web项目

6.2. 编写Cookie.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>JavaScript Cookies</title>
		
		<script type="text/javascript">
			var name = 'uName';
			
			function setCookie(cname,cvalue,exdays) {
			  	var d = new Date();
			  	d.setTime(d.getTime() + (exdays*24*60*60*1000));
			  	var expires = "expires=" + d.toGMTString();
			  	document.cookie = encodeURIComponent(cname + "=" + cvalue + ";" + expires + ";path=/");
			}

			function getCookie(cname) {
			  	var name = cname + "=";
			  	var decodedCookie = decodeURIComponent(document.cookie);
			  	var ca = decodedCookie.split(';');
			  	
			  	for(var i = 0; i < ca.length; i++) {
				    var c = ca[i];
				    while (c.charAt(0) == ' ') {
				      	c = c.substring(1);
				    }
				    if (c.indexOf(name) == 0) {
				    	return c.substring(name.length, c.length);
				    }
			  	}
			  	
			  	return "";
			}

			function checkCookie() {
			  	var user = getCookie(name);
			  	
			  	if (user != "") {
			    	alert("再次欢迎您，" + user);
			  	} else {
			     	user = prompt("请输入姓名：","");
			     	if (user != "" && user != null) {
			       		setCookie(name, user, 30);
			     	}
			  	} 
			}
		</script>
	</head>
	<body onload="checkCookie()">
		
	</body>
</html>

6.3. 效果图