jQuery Cookie学习笔记

什么是jQuery Cookie?

jQuery Cookie 是一个轻量级的插件，可以在客户端操作 cookie，用于存储和读取数据。该插件已停止维护，但仍然被广泛使用。

如何使用jQuery Cookie?

在 HTML 文件中引入 jQuery 和 jQuery Cookie 插件：

htmlCopy Code
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

设置 cookie：

javascriptCopy Code
// 设置 cookie，有效期为 7 天
$.cookie('name', 'value', { expires: 7 });

获取 cookie：

javascriptCopy Code
// 获取 cookie 的值
var value = $.cookie('name');

删除 cookie：

javascriptCopy Code
// 删除 cookie
$.removeCookie('name');

示例

下面是一个简单的示例，展示如何使用 jQuery Cookie 存储用户的偏好设置：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>jQuery Cookie 示例</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script>
		$(document).ready(function() {
			// 检查是否已经设置了用户的偏好
			var bgColor = $.cookie('bgColor');
			
			if (bgColor) {
				// 如果已经设置了背景颜色，则将其应用到页面
				$('body').css('background-color', bgColor);
			}
			
			// 当用户点击色块时，更新背景颜色
			$('.color-block').click(function() {
				var bgColor = $(this).css('background-color');
				
				$('body').css('background-color', bgColor);
				
				// 将用户的偏好存储在 cookie 中，有效期为 7 天
				$.cookie('bgColor', bgColor, { expires: 7 });
			});
		});
	</script>
	<style>
		.color-block {
			width: 50px;
			height: 50px;
			display: inline-block;
			margin-right: 10px;
			cursor: pointer;
		}
		
		.red {
			background-color: red;
		}
		
		.green {
			background-color: green;
		}
		
		.blue {
			background-color: blue;
		}
	</style>
</head>
<body>
	<h1>jQuery Cookie 示例</h1>
	
	<p>请选择您喜欢的背景颜色：</p>
	
	<div class="color-block red"></div>
	<div class="color-block green"></div>
	<div class="color-block blue"></div>
</body>
</html>

在上述示例中，当用户点击页面上的色块时，会将所选颜色存储在 cookie 中，并应用到页面的背景色中。当用户再次访问网站时，背景色会自动恢复为之前选择的颜色。