Cookies的使用之购物车的实现

Cookies的使用之购物车实现

　　最近学习了JSON对象之后，发现Cookies的使用更加的灵活方便了。ps：JSON不是JS。可以这么理解，JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

　　首先为了方便，我们可以先写两个方法来简化我们对Cookies的操作：

//设置cookie
function setCookie(cname, cvalue) {
  document.cookie = cname + "=" + cvalue + ";";
}
// 获取指定名字的cookie值
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

　　好了，现在可以直接用上面的方法设置、获取Cookies的值了。

　　接下来需要知道我们的商品都有什么属性：

　　

　　我这里有一条内容，这是最简单的商品了。假设这就是我们的商品，他有只有名称，单价两个信息，如何将它们放进Cookies呢？

　　Cookies只能接收文本内容，也就是一个字符串，如果将这两个信息分开写进Cookies，那用起来可就麻烦了。JSON就很好的解决了这个问题，甚至可以存放数组内容！

部分代码如下：

var product = {
       "name": nName,
       "price": nPrice,
       "count": count
}

　　"name"用来存储商品名称， "price"用来存储商品单价， "count"用来存储商品数量。

var cartArr = [];

//判断Cookies中是否已有cartInfo信息
if(getCookie("cartInfo")!="" && getCookie("cartInfo")!="[]"){
       cartArr=JSON.parse(getCookie("cartInfo"));
}

isBuy(cartArr,product);
setCookie("cartInfo", JSON.stringify(cartArr));

// 判断是否已经添加过购物车
function isBuy(cartArr, product) {
  for (var i in cartArr) {
    if (cartArr[i].name == product.name) {
      cartArr[i].count += 1;
      return;
    }
  }
  cartArr.push(product);
}

　　product是我们添加进购物车的商品对象，除此之外我们还需要一个cart数组来存放我们的product对象，因为我们的购物车可不只有一件商品。

上面代码中黄色部分是用到的JSON对象中的两个重要方法。JSON.stringify()的主要作用就是将我们的对象类型转换为字符串类型 ，通过他我们就可以将对象类型甚至是数组类型（数组也是对象）放进Cookies中了。JSON.parse()方式则是将字符串类型转换成对象类型，通过他我们可以将从Cookies中取出来的字符串类型还原为对象。有了这两个方法操作Cookies简直不能太方便！

　　上面的isBuy()方法的作用是检测cart数组中是否已经存在了当前选中商品，如果有则只需要在商品属性中将count+1即可，如果没有则将整个商品（product对象）push进我们的数组中。

　　下面是从Cookies中取出购物车信息的代码：

　　

  var pro = getCookie("cartInfo");
  var cart = JSON.parse(pro);

取出来的pro是字符串类型，经过转换后的cart已经是数组类型了。拿到cart数组相信接下来的工作将简单的多。

　　以上就是简单的添加购物车的实现。如果有疑问可以留言，有问题希望看到及时指正，谢谢！