原生JS 购物车及购物页面的cookie使用方法

下面是 “原生JS 购物车及购物页面的cookie使用方法”的完整攻略。

什么是 cookie

cookie 是存储在客户端（例如浏览器）中的小数据块，包含有关用户行为和偏好的信息，以及与网站相关的其他信息。网站有时需要使用 cookie 跟踪和存储有关用户的信息。

cookie 如何在购物车和购物页面使用

在购物车和购物页面中使用 cookie 有两种方法：

1. 保存物品信息

可以使用 cookie 来保存购物车中物品的信息（例如名称、价格等）以便在购物页面上显示已选择的物品。当用户从购物页面向购物车转换时，用户选择的物品会通过 cookie 自动显示在购物车中。

下面是一个示例代码：

function addToCart(item) {
  var cartItems = getCartItems();
  cartItems.push(item);  // 将商品添加到购物车
  setCartItems(cartItems);  // 保存购物车
}

function setCartItems(cartItems) {
  var itemString = JSON.stringify(cartItems);
  document.cookie = "cartItems=" + itemString + "; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/";  // 保存购物车到 cookie
}

function getCartItems() {
  var items = [];
  var itemString = getCookie("cartItems");
  if (itemString !== "") {
    items = JSON.parse(itemString);
  }
  return items;
}

function getCookie(name) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split("=");
    if (cookie[0] === name) {
      return cookie[1];
    }
  }
  return "";
}

在添加商品到购物车时，我们首先通过 getCartItems 函数获取当前购物车中的物品列表，然后将新添加的商品推入该数组中。之后我们通过 setCartItems 函数将更新后的购物车物品列表保存到 cookie 中。

2. 保存用户信息

将用户信息保存到 cookie 中，以便在购物页面中填充相应的表单，例如用户的姓名和地址等信息。

下面是一个示例代码：

function saveUserInfo() {
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  setCookie("name", name, 30);  // 保存用户的姓名到 cookie 中，并设置 cookie 有效期为 30 天
  setCookie("address", address, 30);  // 保存用户的地址到 cookie 中，并设置 cookie 有效期为 30 天
}

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

function getCookie(name) {
  var cookies = document.cookie.split("; ");
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split("=");
    if (cookie[0] === name) {
      return cookie[1];
    }
  }
  return "";
}

在保存用户信息时，我们首先获取用户输入的姓名和地址信息，然后使用 setCookie 函数将这些信息保存到对应的 cookie 中。在购物页面中，我们可以使用 getCookie 函数将用户姓名和地址填充到相应表单框中。

以上就是使用 cookie 在购物车和购物页面中保存信息的两种常用方法。

希望这篇攻略对你有所帮助。