Javascript操纵Cookie实现购物车程序

下面是关于“Javascript操纵Cookie实现购物车程序”的详细攻略：

Cookie简介

Cookie是一种在网站之间传递信息的方式。它们是存储在用户计算机上的小文件，存储着网站访问者的信息。由于Cookie可以在用户计算机和后端服务器之间进行数据交换，所以开发人员可以使用它们来存储用户的信息，例如用户名和购物车内容。

创建Cookie

在JavaScript中，我们可以使用document.cookie属性来创建、读取和删除Cookie。要创建一个新Cookie，可以使用以下代码：

document.cookie = "name=value; expires=date; path=path";

其中，name是Cookie的名称，value是Cookie的值，expires指定Cookie在何时过期，path表示Cookie适用的路径。

例如，要创建一个名为“username”的Cookie：

document.cookie = "username=John Doe";

注意，在此例中，没有指定Cookie的expires或path属性。因此，此Cookie的值将存储在用户计算机上，直到用户关闭浏览器为止。

读取Cookie

要读取Cookie的值，可以使用document.cookie属性。返回的是一个字符串，其中包含网站设置的所有Cookie的名称和值。

例如，可以使用以下代码读取名为“username”的Cookie：

var username = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

此代码首先使用正则表达式从Cookie字符串中提取名称为“username”的Cookie的值。

删除Cookie

删除Cookie的代码与创建Cookie的代码类似。我们只需要将expires属性设置为一个过去的日期即可删除Cookie。

例如，以下代码将删除名为“username”的Cookie：

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

使用Cookie实现购物车

使用Cookie实现购物车的基本思想是将购物车中的商品保存在Cookie中，以便在用户退出网站并重新进入时保留购物车中的内容。下面是一个使用Cookie实现购物车的示例代码：

/**
 * 添加商品到购物车
 * @param {string} product - 商品名称
 * @param {number} price - 商品价格
 * @param {number} quantity - 商品数量
 */
function addToCart(product, price, quantity) {
  var cart = getCart();
  var item = {
    "product": product,
    "price": price,
    "quantity": quantity
  };
  cart.push(item);
  saveCart(cart);
}

/**
 * 从购物车中移除商品
 * @param {string} product - 商品名称
 */
function removeFromCart(product) {
  var cart = getCart();
  for (var i = 0; i < cart.length; i++) {
    if (cart[i].product === product) {
      cart.splice(i, 1);
    }
  }
  saveCart(cart);
}

/**
 * 获取购物车中的所有商品
 * @return {array} - 所有商品的数组
 */
function getCart() {
  var cart = readCookie("cart");
  if (cart === null) {
    return [];
  } else {
    return JSON.parse(cart);
  }
}

/**
 * 将购物车保存到Cookie中
 * @param {array} cart - 所有商品的数组
 */
function saveCart(cart) {
  createCookie("cart", JSON.stringify(cart), 7);
}

/**
 * 删除购物车中的所有商品
 */
function clearCart() {
  createCookie("cart", "", -1);
}

/**
 * 创建新的Cookie
 * @param {string} name - Cookie的名称
 * @param {string} value - Cookie的值
 * @param {number} days - Cookie的过期时间，以天数为单位
 */
function createCookie(name, value, days) {
  var expires;
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  } else {
    expires = "";
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

/**
 * 读取指定名称的Cookie
 * @param {string} name - Cookie的名称
 * @return {string} - Cookie的值
 */
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var 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;
}

此代码包含了添加商品、移除商品、获取所有商品、保存购物车和删除购物车的功能。购物车中的信息保存在名为“cart”的Cookie中。

以下是使用示例：

console.log(getCart()); // []

addToCart("Apple", 2.99, 1);
addToCart("Banana", 1.99, 3);

console.log(getCart()); // [{product: "Apple", price: 2.99, quantity: 1}, {product: "Banana", price: 1.99, quantity: 3}]

removeFromCart("Apple");

console.log(getCart()); // [{product: "Banana", price: 1.99, quantity: 3}]

clearCart();

console.log(getCart()); // []

以上代码展示了如何将商品添加到购物车、移除商品、获取购物车中的所有商品，并在需要时清空购物车的方法。

希望这个简单的购物车示例可以让你了解Javascript操纵Cookie实现购物车程序的相关过程，以及如何操作Cookie，存储和获取数据。