javascript cookie操作类的实现代码小结附使用方法

JavaScript Cookie 操作类的实现代码小结

什么是 Cookie

Cookie 是一种在浏览器中用于存储信息的小型文本文件，通常用来存储用户的偏好设置、购物车内容等信息。Cookie 存储在用户的计算机上，由服务器生成并发送给浏览器。

JavaScript Cookie 操作类实现

以下代码演示了如何通过 JavaScript 操作 Cookie，具体实现了以下功能：

• 设置 Cookie
• 获取 Cookie
• 删除 Cookie

class Cookie {
  /**
   * 设置 cookie
   * @param {String} name cookie 名称
   * @param {String} value cookie 值
   * @param {Number} expires 失效时间（天数）
   * @param {String} path 请求路径
   */
  static set(name, value, expires = 0, path = '/') {
    let date = new Date();
    let time = date.getTime() + expires * 24 * 3600 * 1000;
    date.setTime(time);
    document.cookie = `${name}=${value};expires=` + date.toGMTString() + `;path=${path}`;
  }

  /**
   * 获取 cookie
   * @param {String} name cookie 名称
   * @returns {String} cookie 值
   */
  static get(name) {
    let cookieArr = document.cookie.split(';');
    for (let i = 0; i < cookieArr.length; i++) {
      let cookie = cookieArr[i].trim();
      let index = cookie.indexOf(name + '=');
      if (index === 0) {
        return cookie.substring(name.length + 1, cookie.length);
      }
    }
    return '';
  }

  /**
   * 删除 cookie
   * @param {String} name cookie 名称
   * @param {String} path 请求路径
   */
  static delete(name, path = '/') {
    let date = new Date();
    date.setTime(-1000);
    document.cookie = `${name}=;expires=` + date.toGMTString() + `;path=${path}`;
  }
}

如何使用

// 设置 cookie
Cookie.set('username', 'fizzy', 7, '/');

// 获取 cookie
let username = Cookie.get('username');

// 删除 cookie
Cookie.delete('username', '/');

在上述示例中，我们使用了 Cookie 类来设置、获取和删除 cookie。其中，set 方法用于设置 cookie，在 name、value 参数中分别传入 cookie 名称和值，在 expires 参数中指定 cookie 的失效时间（以天为单位），在 path 参数中指定请求路径。

get 方法用于获取 cookie，需要传入 cookie 的名称，返回 cookie 的值。

delete 方法用于删除 cookie，需要传入 cookie 的名称和请求路径。

除了上述示例，Cookie 类可以根据具体情况进行更多的使用。例如，在用户登录时可以将用户信息存储在 cookie 中，在用户退出时删除 cookie，以实现记住登录状态的功能。

示例说明

以下是两个示例，展示了如何使用 JavaScript Cookie 操作类实现具体功能。

示例一：记住登录状态

在用户登录时，将用户信息存储在 cookie 中，并设置失效时间。在用户访问需要登录才能访问的页面时，先获取 cookie 中的登录信息，如果存在则表示用户已经登录，否则需要跳转到登录页面。

// 用户登录
function login(username, password) {
  if (checkLogin(username, password)) {
    // 验证成功，存储用户信息到 cookie
    Cookie.set('username', username, 7, '/');
    return true;
  } else {
    return false;
  }
}

// 判断是否已登录
function checkLogin() {
  let username = Cookie.get('username');
  return username !== '';
}

// 在需要登录才能访问的页面中调用
if (checkLogin()) {
  // 用户已登录，可以访问该页面
} else {
  // 用户未登录，跳转到登录页
  window.location.href = '/login.html';
}

在上述示例中，我们使用 Cookie 存储了用户登录信息（用户名），并设置了失效时间。在需要登录才能访问的页面中，通过判断 cookie 中是否存在登录信息来决定是否跳转到登录页面。

示例二：记住购物车内容

当用户将商品添加到购物车时，将商品信息存储在 cookie 中，并在需要显示购物车信息的页面中获取 cookie 中的购物车内容，然后将其展示给用户。

// 添加商品到购物车
function addToCart(item) {
  let cart = JSON.parse(Cookie.get('cart'));
  if (cart === '') {
    cart = [];
  }
  cart.push(item);
  Cookie.set('cart', JSON.stringify(cart), 7, '/');
}

// 显示购物车内容
function showCart() {
  let cart = JSON.parse(Cookie.get('cart'));
  // 展示购物车内容
}

在上述示例中，我们将购物车内容存储在一个数组中，并使用 JSON.stringify 将其转换为 JSON 字符串后，通过 Cookie 存储。在需要显示购物车内容的页面中，通过 JSON.parse 将 JSON 字符串转换为数组，然后将其展示给用户。

总结

通过 JavaScript 操作 Cookie，可以实现很多实用的功能，如记住登录状态、记住购物车内容等。开发人员可以根据具体情况使用 Cookie 类实现相关功能。除了 Cookie，还有 LocalStorage、SessionStorage 等存储技术也可以用于浏览器端数据存储。