原生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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 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设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python操作 hbase 数据的方法
2016/12/18 Python
Java分治归并排序算法实例详解
2017/12/12 Python
详解python pandas 分组统计的方法
2019/07/30 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
事业单位辞职信范文
2014/01/19 职场文书
小学教师师德感言
2014/02/10 职场文书
活动总结报告范文
2014/05/04 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2014年督导工作总结
2014/11/19 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Python 语言实现六大查找算法
2021/06/30 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python