js如何实现购物车功能

  介绍

这篇文章主要介绍了js如何实现购物车功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

js是什么

js是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

<强>购物车实现3种方式

1,利用饼干

优点:不占用服务器资源,可以永远保存,不用考虑失效的问题
缺点:对购买商品的数量是有限制的,存放数据的大小不可以超过2 k,用户如果禁用饼干那么就木有办法购买商品,卓越网实现了用户当用户禁用饼干,也可以购买。

2,利用会话

优点:用户禁用饼干,也可以购物
缺点:占用服务器资源,要考虑会话失效的问题

3,利用数据库

优点:可以记录用户的购买行为,便于数据分析用户的喜好,推荐商品
缺点:给数据库造成太大的压力,如果数据量很大的话。

<强>购物车需求分析

1,可以添加商品到购物车中

2,可以删除购物车中的商品

3,可以清空购物车

4,可以更新购物车的商品

5,可以结算

js代码

/* *   ,* Created  by  Administrator 提醒2017/9/3。   ,*//* * *   ,*购物车操作模块   ,*   ,*///商品类/* * *   ,* @name 项目   ,* @example   项才能(sku,名字,,价格,数量)   ,* @params {字符串},sku 商品的标示   ,* @params {字符串},name 商品的名字   ,* @param {号码},price 商品的价格   ,* @param {号码},quantity 商品的数量   ,*/function 项目(sku,名称,价格,数量){   this.sku 才能=,sku;   this.name 才能=,名称;   时间=this.price 才能;价格;   时间=this.quantity 才能;数量;   }      var  shopCart =,函数(窗口){      “才能use  strict";//全才能局变量//才能,note  new  new 日期(“2020 - 12 - 23“),在ie下面报错,不支持这样的语法   var 才能;items =, [], cartName=& # 39; kuaidian_shop_cart& # 39;, expires =, new 日期(日期(),new  .getTime () + 86400000 * 30,)   ,,,debug =,真的,decimal =, 2;   var 才能;options =, {   ,,,& # 39;cartName& # 39;,:, cartName,,//cookie的名字   ,,,& # 39;到期# 39;,:,到期,,//cookie失效的时间   ,,,& # 39;调试# 39;,:,调试,//是否打印调试信息   ,,,& # 39;小数# 39;,:,小数,,//钱的精确到小数点后的位数   ,,,& # 39;调# 39;,:未定义   ,,};//才能暴露给外部的接口方法   return {才能   ,,,inited :,假的,   ,,,init:,功能(选项){   ,,,,,//判断用户是否禁用饼干   ,,,,,如果(! window.navigator.cookieEnabled ) {   ,,,,,,,警报(& # 39;您的浏览器不支持饼干无法使用购物车!,请设置允许设置饼干# 39;公司);   ,,,,,,,return 假;   ,,,,,}   ,,,,,//从cookie中获取购物车中的数据   ,,,,,this.inited =,真的;   ,,,,,如果(选项){   ,,,,,,,扩展(选项,选项);   ,,,,,}   ,,,,,var  cookie =, getCookie (options.cartName);   ,,,,,如果(typeof  cookie ===, & # 39;未定义# 39;){   ,,,,,,,setCookie (options.cartName & # 39; & # 39;, options.expires);   ,,,,,其他}{   ,,,,,,,//每个项之间用,分开,物品的属性之间用|分割   ,,,,,,,var  cookie =, getCookie (options.cartName);   ,,,,,,,如果(饼干){   ,,,,,,,,,var  cItems =, cookie.split (& # 39;, & # 39;);   ,,,,,,,,,,(var 我=0,l=cItems.length; ijs如何实现购物车功能