js实现cookies
如何在JavaScript中操作Cookies
设置Cookie
使用document.cookie属性设置Cookie，可以指定名称、值、过期时间、路径和域。例如设置一个名为username的Cookie，有效期为7天：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";动态设置过期时间可以使用Date对象：
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = `username=John Doe; expires=${date.toUTCString()}; path=/`;获取Cookie
通过document.cookie获取所有Cookie，返回一个字符串，包含所有Cookie的名称和值。需要解析该字符串来获取特定Cookie：
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
const [cookieName, cookieValue] = cookie.trim().split('=');
if (cookieName === name) {
return decodeURIComponent(cookieValue);
}
}
return null;
}
console.log(getCookie('username'));删除Cookie
通过设置Cookie的过期时间为过去的时间来删除Cookie：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";设置Cookie的Secure和HttpOnly属性
为了增强安全性，可以设置Secure和HttpOnly属性：
document.cookie = "username=John Doe; Secure; HttpOnly; path=/";Secure：仅通过HTTPS传输Cookie。HttpOnly：防止JavaScript访问Cookie，减少XSS攻击风险。
使用第三方库简化操作
如果需要更复杂的Cookie操作，可以使用第三方库如js-cookie：
// 使用js-cookie库
Cookies.set('username', 'John Doe', { expires: 7, path: '/' });
const username = Cookies.get('username');
Cookies.remove('username');安装js-cookie库：
npm install js-cookie或在HTML中直接引入：
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>注意事项
- Cookie有大小限制（通常4KB），不适合存储大量数据。
- 过多的Cookie会影响性能，因为每次请求都会携带Cookie。
- 敏感数据不应存储在Cookie中，应考虑使用
localStorage或sessionStorage。
通过以上方法，可以在JavaScript中有效地操作Cookie，实现用户数据的持久化存储。
