原生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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
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函数
2010/02/16 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
python 调用c语言函数的方法
2017/09/29 Python
Python对象属性自动更新操作示例
2018/06/15 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
Overload和Override的区别
2012/09/02 面试题
大学毕业后的十年规划
2014/01/07 职场文书
买房子个人收入证明
2014/01/16 职场文书
小学二年级学生评语
2014/04/21 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
就业意向书
2014/07/29 职场文书
党员自评材料范文
2014/12/17 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python