jquery跨页面添加购物车

jQuery是一个很方便的JavaScript库，可以帮助我们快速地实现一些前端功能，比如跨页面添加购物车功能。这个功能可以让用户在浏览网站的不同页面时，随时将商品添加到购物车中，方便用户的购物体验。

实现这个功能需要用到localStorage，它是浏览器提供的一种本地存储方式，可以将数据存储在客户端本地。在我们的案例中，我们将商品信息存储在localStorage中，每次添加商品时，先检查localStorage中是否已经存在该商品，如果已经存在则数量加一，否则添加新的商品信息。

$(function(){// 对添加购物车按钮进行监听$('button.add-to-cart').click(function(){// 获取商品信息var goods_id = $(this).data('goods-id');var goods_name = $(this).data('goods-name');var goods_price = $(this).data('goods-price');var goods_num = 1;// 获取localStorage中的购物车信息var cart_item = localStorage.getItem('cart_item');if (cart_item) {// 如果localStorage中已经存在购物车信息cart_item = JSON.parse(cart_item);var has_goods = false;// 判断购物车中是否已经存在该商品for (var i in cart_item) {if (cart_item[i].id === goods_id) {cart_item[i].num += 1;has_goods = true;break;}}if (!has_goods) {// 如果购物车中不存在该商品，则添加新的商品信息cart_item.push({id: goods_id,name: goods_name,price: goods_price,num: goods_num});}localStorage.setItem('cart_item', JSON.stringify(cart_item));} else {// 如果localStorage中不存在购物车信息，则添加新的购物车信息localStorage.setItem('cart_item', JSON.stringify([{id: goods_id,name: goods_name,price: goods_price,num: goods_num}]));}});});

上面的代码中，我们对添加购物车的按钮进行了监听，当用户点击按钮时，获取商品信息，并从localStorage中读取购物车信息。如果购物车中已经存在该商品，则将数量加一，否则添加新的商品信息。

通过上面的代码，我们就实现了跨页面添加购物车功能，它可以让用户在不同的页面中轻松地将商品添加到购物车中，方便用户的购物体验。

上一篇：jquery转json字符串

下一篇：jquery跳转到登录页面代码