jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。
前言
使用 jquery.cookie.js 之前需要先引入 jQuery：
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.cookie.js"></script>
我们可以使用第三方资源库引入这两个文件：
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
一、在JQuery中添加cookie
创建 cookie：
$.cookie('name', 'value');
创建 cookie，并设置 7 天后过期：
$.cookie('name', 'value', { expires: 7 });注:如果未指定过期时间，则会在关闭浏览器时过期。
创建 cookie，并设置 cookie 的有效路径，路径为网站的根目录：
$.cookie('name', 'value', { expires: 7, path: '/' });
注：在默认情况下，只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie，必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie 的顶级目录。将这 个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。
示例:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.6.1.min.js"></script>
<!-- 引入jquery的cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
</body>
<script>
// $(function () {
// //获取客户端所有cookie信息
// console.log($.cookie());
// //1.如何添加一个cookie
// $.cookie("name", "tom");
// $.cookie("age", 18);
// $.cookie("score", 100);
// //2.如何获取指定的cookie值
// console.log($.cookie("name"));
// console.log($.cookie("age"));
// //3.移出某个cookie
// $.removeCookie("age");
// console.log($.cookie("age"));
// console.log($.cookie("score"));
// })
//在jq中添加cookie
//创建
$.cookie("name", "张三");//创建了一个cookie对象
$.cookie("age", "22");//创建了第二个cookie对象
$.cookie("gender", "男");
//对象
let person = {
"name": "李四",
"age": 19
}
$.cookie("person", JSON.stringify(person));
</script>
</html>二、获取cookie
读取 cookie：
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
读取所有的 cookie 信息：
$.cookie(); // => { "name": "value" }
示例:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.6.1.min.js"></script>
<!-- 引入jquery的cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
</body>
<script>
//获取本地存储的cookie对象
console.log($.cookie("name"));
console.log($.cookie("age"));
console.log($.cookie("gender"));
</script>
</html>三、删除cookie
// cookie 删除成功返回 true，否则返回 false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 写入使用了 path时，读取也需要使用相同的属性 (path, domain)
$.cookie('name', 'value', { path: '/' });
// 以下代码【删除失败】
$.removeCookie('name'); // => false
// 以下代码【删除成功】
$.removeCookie('name', { path: '/' }); // => true注：删除 cookie 时，必须传递用于设置 cookie 的完全相同的路径，域及安全选项。