前端JavaScript中的cookie是一种用于在浏览器和服务器之间传递数据的机制。它们通常用于跟踪用户的会话信息，如登录状态、购物车内容等。Cookie的使用非常广泛，几乎所有的web应用程序都会使用到cookie来保存用户信息或者偏好设置。
【注：dom和jdom的概念和转换看这篇-->】后端入门 （JQuery基础） 01-CSDN博客
一、jQuery和JavaScript具备cookie板块，都可以对cookie进行操作。
jQuery通过其插件或直接使用"document.cookie"属性进行操作，而JavaScript原生支持通过document.cookie属性来创建、读取、修改和删除cookie。
1. jQuery操作cookie
- 设置cookie：使用$.cookie('cookie_name', 'the_value');可以设置一个名为cookie_name的cookie，值为the_value。如果需要指定过期时间，可以这样设置：$.cookie('cookie_name', 'the_value', {expires: 7});这将设置cookie在7天后过期。（注：expires的时间单位是天）
- 读取cookie：使用$.cookie('cookie_name');可以读取名为cookie_name的cookie的值。
- 删除cookie：通过将值设置为null来删除cookie，例如：$.cookie('cookie_name', null);
2. Javascript调用cookie：
- 设置cookie：使用document.cookie = "account=Rain; expires=Thu, 18 Dec 2024 12:00:00 GMT;";可以设置一个名为account的cookie，值为Rain，并指定过期时间为2024年12月18日。
- 读取cookie：通过访问document.cookie属性可以获取到所有cookie的字符串，然后可以解析这个字符串来获取特定的cookie值。
- 删除cookie：通过设置一个cookie的过期时间为一个过去的日期来实现删除。
二、有了以上概念后，便可以写一个实例了：
1.setcookie.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//javascript设置获取cookie
//document.cookie="变量名=变量值"
document.cookie="account=rain"
document.cookie="password=123456"
document.cookie="key=value;max-age="+60*60
</script>
</head>
<body>
</body>
</html>2.getcookie.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//获取cookie
function getCookie(key){
var arr = document.cookie.split(";")
for(var i=0;i<arr.length;i++){
console.log(arr)
arr[i]=arr[i].trim()
if(arr[i].indexOf(key)==0){
return arr[i].substring(key.length+1)
//从key=后开始截取arr[i]这个字符，即截取"key=value"中的value部分，+1是为了将=也略过去
}
}
return ""
}
console.log(getCookie("account"))
</script>
</head>
<body>
</body>
</html>【注：在getcookie.html一些方法注释】
console.log(document.cookie.split(";"))//以空格作为切割，分割成字符串数组
console.log(document.cookie.trim())//去掉字符串前后的空格
indexOf() 判断有没有字符串，如果有，会返回匹配的第一个字符串的位置
lastindexOf()判断有没有字符串，如果有，会返回匹配的最后一个字符串的位置，如果没有，返回-1
indexOf("",n)跳过n个元素后查找这个字符串
substring()裁剪:{
[substring(index): 返回一个新的字符串，该字符串从指定的开始索引index处直到原字符串的末尾。
[substring(int beginIndex, int endIndex): 返回一个新的字符串，该字符串从指定的开始索引处到结束索引前一位(留头去尾)。
开始索引（beginIndex）：必须是字符串中的有效索引，即0到字符串长度-1之间的整数。
结束索引（endIndex）：必须是字符串中的有效索引，且大于开始索引。
负索引：如果开始索引或结束索引为负数，则从字符串的末尾向前计数，负数绝对值加1为正索引位置。例如，-1表示字符串的最后一个字符。
}
3.此处还给出一个jQuery简易版本：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jQuery/jq.js"></script>
<script src="../jQuery/jquery.cookie.js"></script>
<script>
$.cookie('password','123456',{expire:1})//设置失效期限为一天{expire:1}
//获取
console.log($.cookie('key'))
console.log($.cookie('account'))
console.log($.cookie('password'))
//删除
$.removeCookie('password')
</script>
</head>
<body>
</body>
</html>三、cookie的优缺点：
优点：
- 可以设置到期规则，cookie默认在国企之前一直保存在浏览器上
cookie包含简单的键值对
缺点：
- 大小受限制-->大多数浏览器对每个域的Cookies数量和大小都有严格的限制。每个Cookies的大小通常不超过4KB，且每个域最多只能存储50个Cookies
- cookie禁用问题
- 带来安全风险，cookie可以被篡改