原生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 相关文章推荐
JavaScript 学习历程和心得分享
Dec 12 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
javascript如何创建对象
Aug 29 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
JS 时间显示效果代码
2009/08/23 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
js获取ip和地区
2017/03/10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
python 字符串格式化的示例
2020/09/21 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
学校后勤人员职责
2013/12/27 职场文书
司机工作自我鉴定
2014/09/19 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
小学毕业教师寄语
2019/06/21 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL