极客笔记JS对cookie操作
在前端开发中，我们经常需要对cookie进行操作，以实现一些功能，如记住用户登录状态、存储用户偏好设置等。本文将详细介绍如何使用JavaScript来操作cookie，包括设置、获取、删除cookie等操作。
什么是cookie
首先，我们需要了解什么是cookie。Cookie是浏览器用来存储信息的一种技术，是存储在用户设备上的小型文本文件。它们包含着一些网站的信息，这样网站可以提供一些个性化的服务，比如记住用户的登录状态、保存购物车中的商品等。
每个cookie都是由一个键值对（key-value pair）组成，如：name=value。另外，cookie还有一些其他属性，例如过期时间、域名、路径等。
设置cookie
要在浏览器中设置一个cookie，我们可以使用document对象的cookie属性。下面是一个简单的设置cookie的示例代码：
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// 设置一个名为"username"的cookie，值为"john"
setCookie("username", "john", 30);
在上面的示例代码中，setCookie函数接受三个参数：cookie的名称、值和过期时间（以天为单位）。如果未提供过期时间，则cookie将在会话结束时删除（即关闭浏览器时）。
获取cookie
要获取浏览器中的cookie，我们可以通过document对象的cookie属性来获取。下面是一个简单的获取cookie的示例代码：
function getCookie(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for(var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length);
}
}
return null;
}
// 获取名为"username"的cookie的值
var username = getCookie('username');
console.log(username);
在上面的示例代码中，getCookie函数接受一个参数：cookie的名称，并返回对应的值。如果未找到该cookie，则返回null。
删除cookie
要从浏览器中删除一个cookie，我们可以通过设置其过期时间为一个过去的时间来实现。下面是一个简单的删除cookie的示例代码：
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
// 删除名为"username"的cookie
deleteCookie('username');
在上面的示例代码中，deleteCookie函数接受一个参数：cookie的名称，并将其过期时间设置为一个过去的时间，从而删除该cookie。
实例演示
接下来，我们用一个简单的实例演示如何使用上述代码来设置、获取和删除cookie。在这个示例中，我们将使用一个简单的登录表单来保存用户名，并在页面加载时检查是否存在该cookie，如果存在则显示欢迎信息。
首先，我们定义一个简单的HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Example</title>
</head>
<body>
<h1>Cookie Example</h1>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button type="submit">Login</button>
</form>
<div id="welcomeMessage" style="display: none;"></div>
<script>
// Cookie操作代码
</script>
</body>
</html>
接下来，我们编写JavaScript代码来实现设置、获取、删除cookie的功能，并在页面加载时检查cookie是否存在，并显示相应的欢迎信息：
// 获取表单元素和欢迎消息元素
var loginForm = document.getElementById('loginForm');
var usernameInput = document.getElementById('username');
var welcomeMessage = document.getElementById('welcomeMessage');
// 检查是否存在cookie
window.onload = function() {
var username = getCookie('username');
if (username) {
welcomeMessage.innerText = 'Welcome back, ' + username + '!';
welcomeMessage.style.display = 'block';
loginForm.style.display = 'none';
}
}
// 设置cookie
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
var username = usernameInput.value;
setCookie('username', username, 30);
welcomeMessage.innerText = 'Welcome, ' + username + '!';
welcomeMessage.style.display = 'block';
loginForm.style.display = 'none';
});
// 删除cookie
welcomeMessage.addEventListener('click', function() {
deleteCookie('username');
welcomeMessage.innerText = '';
welcomeMessage.style.display = 'none';
loginForm.style.display = 'block';
});
在上面的代码中，我们首先获取了登录表单和欢迎消息的元素，并在页面加载时检查是否存在名为username的cookie。如果存在，我们显示欢迎信息，并隐藏登录表单。当用户提交登录表单时，我们将用户名存储在cookie中，并显示欢迎信息。用户点击欢迎信息时，我们删除该cookie，并显示登录表单。
通过这个示例，我们可以看到如何使用JavaScript来实现对cookie的操作，包括设置、获取和删除cookie。在实际开发中，我们可以根据具体需求来使用cookie来实现各种功能。