非常不错的[JS]Cookie精通之路

“非常不错的[JS]Cookie精通之路”攻略

什么是 Cookie

Cookie是一种用于跟踪网站访问者并存储其首选项的技术。它是由服务器发送给客户端（即浏览器）的小文本文件。该文件由客户端存储，并在每次请求该网站时发送回服务器。Cookie通常用于存储用户的会话ID、购物车数据、用户首选项等信息。

创建 Cookie

在JavaScript中，使用document.cookie属性可以创建，读取和删除Cookie。以下是一个示例，它将名称为“username”的Cookie设置为“john”：

document.cookie = "username=john";

如果需要设置多个Cookie，可以使用分号来分隔它们。以下是一个示例，它设置了名称为“username”和“language”的Cookie：

document.cookie = "username=john; language=english";

读取 Cookie

要读取Cookie，可以使用以下代码：

const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith("username=")) {
        const username = cookie.substring("username=".length);
        console.log(username);
    }
}

这将读取名称为“username”的Cookie，并将其值打印到控制台上。

删除 Cookie

为了删除Cookie，您需要设置一个已经过期的时间戳。以下是一个示例，它将名称为“username”的Cookie设置为过期：

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

示例说明

示例1：使用Cookie存储用户首选项

假设您正在开发一个网站，需要存储用户的首选项，例如他们的语言和主题首选项。您可以使用Cookie来实现这一点。

代码示例：

function setPreferences(language, theme) {
    document.cookie = `language=${language};`;
    document.cookie = `theme=${theme};`;
}

function getPreferences() {
    const cookies = document.cookie.split(";");
    let preferences = {};
    cookies.forEach(cookie => {
        const [key, value] = cookie.split("=");
        preferences[key.trim()] = value;
    });
    return preferences;
}

setPreferences("english", "light");
console.log(getPreferences());

此示例代码将设置名称为“language”和“theme”的Cookie，并通过getPreferences()函数从Cookie中读取首选项，并将其打印到控制台上。

示例2：使用Cookie实现记住密码功能

假设您正在开发一个登录页面，并需要实现“记住密码”功能。您可以使用Cookie来存储用户的用户名和密码，以便他们下一次访问时不需要重新输入。

代码示例：

function rememberCredentials(username, password) {
    document.cookie = `username=${username};`;
    document.cookie = `password=${password};`;
}

function getCredentials() {
    const cookies = document.cookie.split(";");
    let credentials = {};
    cookies.forEach(cookie => {
        const [key, value] = cookie.split("=");
        credentials[key.trim()] = value;
    });
    return credentials;
}

// simulate user login
rememberCredentials("john", "password123");

// get credentials and pre-fill the login form
const credentials = getCredentials();
if (credentials.username && credentials.password) {
    document.querySelector("#username").value = credentials.username;
    document.querySelector("#password").value = credentials.password;
}

当用户登录时，rememberCredentials()函数将用户名和密码存储为Cookie。下一次访问该网站时，getCredentials()函数将从Cookie中读取用户名和密码，并将其填充到登录表单中，以便用户不需要重新输入。

这两个示例说明了如何使用JavaScript Cookie来存储和读取数据。您可以根据您的具体需求进行更改和扩展，借此来实现更多易用的功能。