js往cookie中存数据

在JavaScript中，向Cookie存储数据是通过document.cookie属性实现的。以下是关于Cookie基础概念、优势、类型、应用场景以及如何存储数据的详细解释：

基础概念

Cookie是一种存储在用户浏览器上的小型数据片段，它可以包含一些信息，比如用户偏好设置、会话标识符等。当用户访问一个网站时，浏览器会将相关的Cookie发送到服务器，以便服务器识别用户。

优势

持久性：可以设置Cookie的有效期，使其在浏览器关闭后仍然保留。
跟踪用户行为：可以用来跟踪用户的浏览习惯，以便提供个性化服务。
简化登录过程：存储会话标识符，使用户无需每次访问都重新登录。

类型

会话Cookie：浏览器关闭后失效。
持久Cookie：设置了过期时间，即使浏览器关闭也会保留。

应用场景

用户认证：存储会话令牌，以便用户在多个页面间保持登录状态。
购物车：存储用户的购物车内容。
个性化设置：存储用户的偏好设置，如主题、语言等。

如何存储数据

向Cookie中存储数据的基本步骤如下：

设置Cookie：
设置Cookie：
- key 和 value 是你要存储的数据。
- expires 是Cookie的过期时间。
- path 是Cookie的有效路径。

读取Cookie：
读取Cookie：
删除Cookie：
删除Cookie：

示例代码

以下是一个完整的示例，展示如何设置、读取和删除Cookie：

// 设置Cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 读取Cookie
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 删除Cookie
function eraseCookie(name) {
    document.cookie = name + "=; Max-Age=-99999999; path=/";
}

// 使用示例
setCookie("username", "JohnDoe", 7); // 设置一个名为username的Cookie，值为JohnDoe，有效期7天
console.log(getCookie("username")); // 输出: JohnDoe
eraseCookie("username"); // 删除username Cookie
console.log(getCookie("username")); // 输出: null