原生js+cookie实现购物车功能的方法分析


Posted in Javascript onDecember 21, 2017

本文实例讲述了原生js+cookie实现购物车功能的方法。分享给大家供大家参考,具体如下:

这里使用js+cookie实现简单的购物车功能。

首先是简单的HTML结构,只是为了演示下功能。

<ul>
  <li><span>a0001</span><span>shdfi</span><span>¥98.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>¥698.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>a0003</span><span>dfdfi</span><span>¥988.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>a0004</span><span>sssi</span><span>¥998.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>a0005</span><span>yyu</span><span>¥98.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>a0006</span><span>sheri</span><span>¥598.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>a0007</span><span>dsfcdhdfi</span><span>¥498.00</span>
<input type="button" value="加入购物车"></li>
  <li><span>sbnm,</span><span>¥698.00</span><input type="button" value="加
入购物车"></li>
</ul>
<a href="购物车查看页面.html" rel="external nofollow" >查看购物车</a>

下面的代码是实现点击添加按钮时,把商品信息加入cookie,注释比较详细,在代码中我把操作cookie(set和get封装为cookieUtil对象的方法,方便调用)。

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //判断是否存在cookie,或是第一次添加
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //遍历给每个input元素添加点击事件
      for (var j = 0; j < input.length; j++) {
        input[j].onclick = function () {
          var g_id = this.parentNode.children[0].innerHTML;
          var g_name = this.parentNode.children[1].innerHTML;
          var g_price = this.parentNode.children[2].innerHTML;
          //遍历cookie,判断是否已经存在该商品
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //已经存在该商品,商品数量+1
              arr[i].num++;
              break;//立即结束遍历
            }
          }
          //如果i的值与arr长度相同,则证明遍历结束也没有进入过if条件语句,
          //cookie中不存在该商品,新建一个商品对象,并添加到数组中
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //把更新后的数组序列化为JSON字符串,保存到cookie中
          var date = new Date();
          date.setDate(date.getDate() + 10); //保存十天
  //保存cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

这里是封装的cookieUtil对象

//cookie Util
var cookieUtil = {
  //添加cookie
  setCookie: function (name, value, expires) {
    var cookieText = encodeURIComponent(name) + "=" + 
encodeURIComponent(value);
    if (expires && expires instanceof Date) {
      cookieText += "; expires=" + expires;
    }
    // if (domain) {
    //   cookieText += "; domain=" + domain;
    // }
    document.cookie = cookieText;
  },
  //获取cookie
  getCookie: function (name) {
    var cookieText = decodeURIComponent(document.cookie);
    var cookieArr = cookieText.split("; ");
    for (var i = 0; i < cookieArr.length; i++) {
      var arr = cookieArr[i].split("=");
      if (arr[0] == name) {
        return arr[1];
      }
    }
    return null;
  },
  //删除cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name) + "=; expires=" + 
new Date(0);
  }
};

上面的代码都非常好理解,下面这个页面就是把cookie中的商品信息取出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查看购物车页面</title>
  <script src="../Utils.js"></script>
  <script>
    onload = function () {
      var ul = document.getElementsByTagName("ul")[0];
      var arr = cookieUtil.getCookie("car");
      if (arr) {
        arr = JSON.parse(arr);
        //存在cookie则取出来显示到页面上
        for (var i = 0; i < arr.length; i++) {
          //每个数组元素对应的是一个商品对象
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "商品名称:" + goods.g_name + ",商品数
量" + goods.num + ",商品单价:" + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("购物车中还不存在商品!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
document.createElement()用法
Mar 13 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
解读ES6中class关键字
Nov 20 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 #Javascript
解析vue中的$mount
Dec 21 #Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 #Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 #Javascript
利用node实现一个批量重命名文件的函数
Dec 21 #Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 #Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 #Javascript
You might like
php汉字转拼音的示例
2014/02/27 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
初中语文教学反思
2014/02/02 职场文书
企业活动策划方案
2014/06/02 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
上诉答辩状范文
2015/05/22 职场文书
婚宴父母致辞
2015/07/27 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
高一英语教学反思
2016/03/03 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Nginx反向代理配置的全过程记录
2021/06/22 Servers
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电