整理JavaScript中cookie操作对象的应用

在Web开发中，cookie是一种存储在用户计算机中的小型文本文件，用于存储Web站点的信息。JavaScript可以方便地操作cookie对象，以便于实现用户登录、跟踪会话和存储用户偏好等功能。本文将介绍JavaScript中常用的cookie操作对象的应用。

1. document.cookie

document.cookie是JavaScript中的一个全局变量，用于读取和修改当前文档的cookie。该变量返回的是一个字符串，格式为key=value，多个cookie之间用分号和空格隔开。可以用字符串的方式来添加、修改和删除cookie，格式为key=value;expires=expiry_date;path=path_value。

1.1 添加cookie

可以使用document.cookie变量来添加新的cookie。下面的代码演示了如何向当前文档添加一个名为username的cookie，值为张三，其过期时间为1个小时后：

document.cookie = "username=张三;expires=" + new Date(new Date().getTime() + 3600000).toUTCString();

这里使用了toUTCString()方法将当前时间转换为格林尼治时间，再加上1个小时的毫秒数作为cookie的过期时间。如果不设置过期时间，则cookie默认在当前会话结束时自动删除。

1.2 修改cookie

要修改cookie的值或过期时间，只需按照添加cookie的方式设置新值即可：

document.cookie = "username=李四;expires=" + new Date(new Date().getTime() + 3600000).toUTCString();

这里将名为username的cookie的值修改为李四，过期时间保持1个小时后。

1.3 删除cookie

为了删除一个cookie，只需将其过期时间设置为过去的一个时间戳即可，例如：

document.cookie = "username=;expires=" + new Date(0).toUTCString();

这里将名为username的cookie的过期时间设置为1970年1月1日，即已过去的时间，从而实现了删除该cookie的目的。

2. Cookie对象

除了使用document.cookie操作外，JavaScript还提供了一个Cookie对象，用于更方便地读取和设置cookie的属性。

2.1 构造函数

首先，我们需要创建一个Cookie对象的实例，可以使用Cookie构造函数。构造函数的参数是一个字符串，格式为key=value;expires=expiry_date;path=path_value。

let myCookie = new Cookie("username=张三;expires=" + new Date(new Date().getTime() + 3600000).toUTCString());

2.2 属性

Cookie对象有以下几个属性：

name：cookie的名称，等于key。

value：cookie的值，等于value。

expires：cookie的过期时间，等于expiry_date。

path：cookie的路径，等于path_value。

以下是使用Cookie对象读取和设置属性的示例：

let myCookie = new Cookie("username=张三;expires=" + new Date(new Date().getTime() + 3600000).toUTCString());
console.log(myCookie.name);    // 输出："username"
console.log(myCookie.value);   // 输出："张三"
console.log(myCookie.expires); // 输出："Tue, 31 Dec 2024 08:00:00 GMT"
console.log(myCookie.path);    // 输出：""
myCookie.value = "李四";
myCookie.expires = new Date(0).toUTCString();
console.log(document.cookie); // 输出："username=;expires=Thu, 01 Jan 1970 00:00:00 GMT"

注意，修改Cookie对象的属性并不会修改document.cookie的值，需要手动将属性值重新赋给document.cookie。

3. 封装cookie方法

为了更方便地使用cookie，在实际开发中通常会封装一些常用的cookie操作方法，例如读取、设置、删除cookie等。

下面是一个cookie操作类的示例代码：

class CookieUtil {
  static get(name) {
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      let cookie = cookies[i];
      while (cookie.charAt(0) === ' ') {
        cookie = cookie.substring(1);
      }
      if (cookie.indexOf(name + '=') === 0) {
        return cookie.substring(name.length + 1);
      }
    }
    return null;
  }
  static set(name, value, expires, path) {
    let cookie = name + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
      cookie += ';expires=' + expires.toUTCString();
    }
    if (path) {
      cookie += ';path=' + path;
    }
    document.cookie = cookie;
  }
  static remove(name) {
    CookieUtil.set(name, '', new Date(0), '/');
  }
}
CookieUtil.set('username', '张三', new Date(new Date().getTime() + 3600000), '/');
console.log(CookieUtil.get('username')); // 输出："张三"
CookieUtil.set('username', '李四', new Date(new Date().getTime() + 3600000), '/');
console.log(CookieUtil.get('username')); // 输出："李四"
CookieUtil.remove('username');
console.log(CookieUtil.get('username')); // 输出：null

这里封装了三个静态方法：get、set和remove。get方法用于读取cookie的值，set方法用于设置cookie的值，remove方法用于删除cookie。使用这些方法可以使cookie的操作更加简单和可维护。

结论

在JavaScript中，cookie是一种方便存储Web站点信息的方法。可以使用document.cookie和Cookie对象来操作cookie，也可以封装常用的cookie操作方法以简化代码。需要注意的是，cookie的过期时间应该根据实际情况设置，以免出现安全问题。