【cookie】JavaScript操作增删改查

前端JS只能操作​​非HttpOnly​​的Cookie（这是出于安全考虑）。

1. 查（Read）：获取所有Cookie

使用 document.cookie获取当前域名下的所有Cookie（是一个字符串）。

let allCookies = document.cookie;
console.log(allCookies); 
// 输出： "username=admin; sessionid=abc123; theme=dark"

​​注意​​：你需要自己解析这个字符串来获取特定Cookie的值。

2. 增（Create） / 改（Update）：设置一个Cookie

使用 document.cookie赋值。如果Cookie不存在则创建，如果已存在则更新其值。

​​语法​​：document.cookie = "name=value; expires=UTCString; path=/; domain=; secure";

// 1. 创建一个简单Cookie（浏览器关闭后失效）
document.cookie = "username=admin";// 2. 创建带过期时间的Cookie（设置为7天后）
let expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 7);
document.cookie = `theme=dark; expires=${expiryDate.toUTCString()}; path=/`;// 3. 创建安全的Cookie（仅通过HTTPS传输）
document.cookie = "sessionid=abc123; path=/; secure";

3. 删（Delete）：删除一个Cookie

​​原理​​：将Cookie的过期时间设置为一个过去的时间，浏览器会自动清除它。

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

搜索网址http://localhost/cookie/index.php，然后输入用户名和密码，打开开发者模式复制cookie

到火狐搜索网址，打开开发者模式，改cookie

修改后能看到登录成功  登录豆瓣导出cookie，把cookie复制到火狐，按import导入

也能成功跳转为已登录界面

获取cookie

两种方法

document.cookie;     

alert(document.cookie);   #弹窗

添加cookie

document.cookie="username=wuya";

刷新一下可以看到把cookie发过去了